为什么我们需要构建工具
- 转换ES6语法
- 转换JSX
- CSS前缀补全/预处理器
- 压缩混淆
- 图片压缩
1. 构建体积优化
- Scope Hoisting
- Tree-shaking
- 公共资源分离
- 图片压缩
- 动态Polyfill
2.速度优化策略
- 使用webpack4
- 多进程/多实例构建 ：webpack4中官方文档的极力推荐thread-loader，并且HappyPack将不再被维护
- 分包
- 缓存
- 缩小构建目标
速度提升ing
👉 未升级之前全量打包 ⚠️ ⚠️
image.png
👉 升级到webpack4.43.0之后
image.png
👉 首先加一波exclude、include之后
image.png
👉 使用 thread-loader 之后
image.png
image.png
image.png
打包时间平均20s左右
参考
https://blog.csdn.net/lizhi1030/article/details/107062799/
https://www.cnblogs.com/xiangxiang2020/p/12749605.html
https://www.cnblogs.com/duanlibo/p/12532569.html
https://blog.csdn.net/yuqing1008/article/details/104832610/
网友评论