9种常见的webpack进行项目调优插件（废话少说赶紧上车）

webpack调优常用plugins

1. .webpack 调优之HappyPack
   webpack是基于node的单线程模型所以在进行打包的时候，如果遇到文件比较庞大的时候单线程只能一个一个处理的速度是比较慢。
   happypack的原理就是改变单线程模型将一个任务划分成为多个子任务并发执行，每个子任务执行完成之后再把执行的结果返回给主任务，通过 多个线程并发提高打包的效率。
2. 使用devServer开启项目热更新
3. 压缩代码插件，比如PostCss，压缩css代码，uglifyjs-webpack-plugin 压缩ES6代码
4. UglifyJSPlugin 压缩js代码，有很多配置（sourceMap映射，commts代码注释，beautfu）
5. 关闭一些无用的sourceMap文件，减少打包耗时以及包的体积
6. tree Shaking 剔除一些没有使用到的js代码块
7. 使用webpack merge 结合 process.env.NODE_ENV 区分开发环境和生产环境
8. Parallel Uglify Plugin 并行打包压缩js，es6文件
9. 大图篇压缩：image-webpack-plugin

const HappyPack = require('happypack')
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionPlugin = require("compression-webpack-plugin");
const webpackConfig = merge(baseWebpackConfig, {
...(基础的配置我省了，就是要上干货)
  plugins:[
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: 'babel',
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ['babel-loader?cacheDirectory'],
      // ... 其它配置项
      threadPool: happyThreadPool,
    }),
    new HappyPack({
      id: 'css',
      // 如何处理 .css 文件，用法和 Loader 配置中一样
      loaders: ['css-loader'],
      // 使用共享进程池中的子进程去处理任务
      threadPool: happyThreadPool,
    }),
    new UglifyJsPlugin({
      parallel: 4,
      uglifyOptions: {
          output: {
              comments: false,
              beautify: false,
          },
          compress: {
              warnings: false
          },
      },
      cache: true,
    }),
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  ]
 }