重要webpack性能优化

1. webpack优化打包构建速度-开发体验和效率

• 优化babel-loader
  缓存：cacheDirectory,只要加了这个，es6代码中没有改动的就不会重新编译，集中缓存，加快速度。
  

• IgnorePlugin 避免引入无用模块
  比如有个Moment.js库支持很多语言
  
  避免引入过多的语言，动态引入。
  
  

• noParse 避免重复打包
  比如xxx.min.js之类的文件是已经用模块化处理过的，不用我们再去打包一次。
  
  

• happyPack 多进程打包
  JS单线程，开启多进程打包
  提高构建速度（特别是多核CPU）happyPack可以放到common也可以放到dev当中。
  

• ParellelUglifyPlugin 多进程压缩JS
  只能放到生产环境下prod.
  
  
  关于开启多进程 - 为什么不能直接用happyPack或者Uglify 要按需使用。
  

• 自动刷新（只在开发环境用）
  变量更新，保存之后，网页全部刷新，状态会丢失，速度比较慢。
  
  用不太到。只要引用了devServer会默认开启用自动更新。

• 热更新
  新代码生效，网页不刷新，状态不丢失。（体验是好，但是成本变高了）
  在devServer里面加一条hot: true

module.hot 注册监听热更新范围
  

• DllPlugin 动态链接库插件
  思路：先提前打包好，我们再去使用它。
  背景：
  
  怎么去用这两个插件？
  单独配置一个webpack.dll.js文件

  标签：插件,代码,js,webpack,引入,优化,性能,打包
  From： https://www.cnblogs.com/gardenOfCicy/p/18513242