提升webpack打包速度有：
1. 提升构建速度
-
开启多进程打包
- thread-loader
- happypack插件
2. 缩小构建体积
-
抽取公共模块：
- optimization.splitChunks
- mini-css-extract-plugin：把CSS从打包后的js文件中剥离出来，减小主bundle的体积
-
压缩JS
- terser-webpack-plugin：并行处理多个子任务，效率高
- webpack-parallel-uglify-plugin：多个进程并发压缩JS，但是每个进程还是使用uglifyjs-webpack-plugin压缩
-
压缩CSS
- optimize-css-assets-webpack-plugin
-
压缩图片
- image-webpack-loader插件
-
擦除无用的JS和CSS代码
- tree-shaking
-
externals
- 外部扩展。防止将某些import的包打包进bundle中，而是在运行时从外部获取这些扩展依赖。
3. 预编译
- DLL动态链接库(https://www.jianshu.com/p/d0eec2cda18b)
4. 使用缓存提升二次构建速度
- babel-loader开启缓存
- terser-webpack-plugin开启缓存
- HardSourceWebpackPlugin
- cache-loader
网友评论