前提:打包分析
1.打包体积
使用webpack-bundle-analyzer插件能够分析出打包的每个依赖大小和输出文件占比。
2.打包速度
使用speed-measure-webpack-plugin,但是不支持与html的plugin共存
一、体积优化
1.js压缩
2.css压缩、去重
3.图片压缩
4.分chunk以及tree-shaking
5.外链cdn
6.组件按需加载
二、编译速度
1.区分开发环境和生产环境配置
2.开启多线程编译
使用happypackloader
3.设置别名alias
通过设置别名减少文件查找次数
4.预先编译第三方资源(DLLPlugin)
5.开启缓存cache
6.缩小构建文件目标 exclude和include
三、体验优化
1.开启热更新和前面提到的开启缓存
2.线上环境开启gzip。需要webpack打包编译gzip以及nginx支持
优点:减少请求的资源大小从而加快访问速度
缺点:
- 会消耗内存
- 网络速度快的情况下gzip收益不大