webpack性能优化

开发环境优化

• HMR 模块热替换
  • devServer设置hot: true
  • style-loader 已实现
  • webpack.HotModuleReplacementPlugin
• source map
  • 建立源码与构建代码之间的映射关系，快速定位错误在源码中的位置

生产环境优化（构建时优化 & 运行时优化）

• 缓存策略
  • 配置babel-loader时，设置cacheDiretory为true，开启babel缓存，之后webpack在打包时，只会对修改过的模块重新编译，其他模块读取babel缓存中的即可
  • 配合静态资源缓存策略，webpack要在输出文件名称上加hash
• Tree Shaking
  • webpack在打包时，会自动去掉引用了但未使用的模块
  • sideEffects，在直接 import 模块名称时， webpack无法判断引入的模块是否有用，因为即使没有导出值，但也可能修改了全局对象，所以对这些模块，都不会执行Tree Shaking，我们可以在package.json中配置sideEffects告诉webpack哪些模块是有作用的，而其他模块则是无用的
• Code Spliting
  • 多入口，多出口 打包
  • optimization.splitChunks.chunks: 'all' 将node_modules中模块单独打包
  • import()
• 减少参与构建的代码
  • 使用externals 外部链接，告诉webpack哪些node_modules模块不需要参与打包，之后在html模板文件中将该资源以script标签形式引入，CDN
  • DLL动态链接库，将指定几个node_modules模块打包成一个dll，并告诉webpack在构建时不需要再打包这几个模块，之后在html文件中手动引入dll
• 减小构建出代码的体积
  • webpack.UglifyJsPlugin
  • OptimizeCssAssetWebpackPlugin
  • HtmlWebpackPlugin
• 多进程打包
  • thread-loader
  • HappyPack