一、代码层面
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进行多线程代码压缩
网友评论