vue性能优化

一、代码层面

1、区分v-if和v-show的使用场景

2、区分computed与wacth的使用场景

3、避免v-for与v-if同时使用，v-for优先级比v-if高。可使用computed先过滤再渲染

4、懒加载(图片，路由，UI组件库，组件)

5、监听事件及时销毁

6、服务端渲染

7、使用精灵图

8、尽量减少http请求

9、使用服务端渲染： SEO优化，首屏加载速度更快

二、Webpack 层面

1、开启图片压缩，安装image-webpack-loader

2、减少 ES6 转为 ES5 的冗余代码  插件: babel-plugin-transform-runtime

3、提取公共代码 插件:CommonsChunkPlugin

4、构建结果输出分析: 插件webpack-bundle-analyzer

5、开启gzip压缩: conetnt-Ecoding: gzip；

6、使用强缓存    

7、各种依赖包使用cdn方式引入

8、使用speed-measure-webpack-plugin查看具体步骤耗时

9、使用happyPack或者thread-loader开启多线程打包缩短时间

10、使用catch-loader，二次打包是对loader进行缓存

11、开启webpack-bundle-analyzer构建图形化打包分析

12、使用terser-webpack-plugin进行多线程代码压缩