Vue 首屏优化

项目信息：vue2.5.2 , element-ui2.13.0

分析

1. 使用webpack 插件 webpack-bundle-analyzer 分析当前项目的占用情况

2. 使用chrome f12 查看 请求network加载大文件情况（包括大图片与大js，大css）

3. 使用chrome f12 的 performance 分析当前页面每一帧的调用函数和页面渲染的时间情况。

优化

1. 服务端请求设置支持gzip 解析

2. vue项目打开gzip打包方式 compression-webpack-plugin (tomcat8 不能解析gzip文件待研究)

3. 大图片使用tinypng.com/ 在线压缩

4. main.js 去掉不需要全局注册的 //Vue.use(xxxx)

5. 所有路由都设置成动态加载 component: () => import('./XXXX.vue')

6. 检查使用不多的大插件，如 fontawesome 如果使用不多,直接用图片代替，lodash如果按需导入方法，或者自己实现工具类。

7. 使用cdn的方式加载第三方库

   1. 在index.html直接引入 cdn源 cdn.bootcss.com
   2. 在webpack 配置 externals: { 'element-ui': 'ElementUI'}
   3. main.js 可以直接注释// import 和// Vue.use(xxxx)

8. webpack : optimization.splitChunks 切分打包的文件

9. webpack : DllPlugin 打包第三方库