简述vue项目的前端优化和ios8 ios9等低版本兼容性问题

新公司是做自己的独立产品，比之前呆过的外包公司要求严格的多，注重用户体验，以下是在新项目里进行前端优化的一些操作

一，低版本空白屏问题，以及ios8的样式问题

本项目是通过vue-cli搭建，上线以后运行在新版本的苹果手机和安卓手机上均无问题。但是在ios8 9上出现了空白屏的原理，经过测试以后发现是低版本不兼容es6的语法，经过几番尝试找到了最优解。

1 空白屏问题

首先安装babel-polyfill,安装命令：npm install --save-dev babel-polyfill 

安装成功后找到webpack.base.conf里把第16行的代码换成第17行的写法，如图1所示

图1

相同的页面，加入红色方框里的代码，如图2所示

{

        test: /\.js$/,

        exclude: /node_modules/,

        loader: "babel-loader"

      },

图2

2 样式问题

找到webpack.prod.conf文件，将注释代码替换成红色方框内的代码即可，如图3

图3

二  打包之后的文件以及生成的vendor文件过大的问题

1打包文件过大的问题

找到config底下的index.js文件，在69行的代码productionSourceMap:true,将true改为false。不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。但是这里为了瘦身大业，可以舍去。

2生成的vendor文件过大的问题

vendor文件里会将项目中vue  vue-router  mint-ui element-ui等库和框架一起打包压缩，这样必定会占用空间，造成压缩包过大。通常都有好几百k至少超过1M，在加载页面的时候会极度耗时。

这里建议使用cdn 然后在build里找到webpack.base.conf，加入平常不改动的库，如图4所示，然后在入口页面index.html导入相应的cdn

图4

同时要在项目里把诸如图5这样的导入都去除，否则打包的时候依然会占用空间，我项目里这样优化之后，vendor大小由239k优化到10k,减小的20倍

图5

三 压缩图片 ，推荐一个压缩图片的工具 https://tinypng.com/  如果有更改好的工具可以留言告知~