webpack4打包优化记录总结

提升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. 预编译

4. 使用缓存提升二次构建速度

  • babel-loader开启缓存
  • terser-webpack-plugin开启缓存
  • HardSourceWebpackPlugin
  • cache-loader
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容