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

• DLL动态链接库(https://www.jianshu.com/p/d0eec2cda18b)

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

• babel-loader开启缓存
• terser-webpack-plugin开启缓存
• HardSourceWebpackPlugin
• cache-loader