CompressionWebpackPlugin

当我们的项目越做越大时，会发现 即使做了code split  代码压缩  动态加载 等等一系列优化之后 页面的响应速度依旧很慢

这个时候时候可以使用 compression-webpack-plugin 这个插件 

步骤

      安装

npm install compression-webpack-plugin -D

　　改造项目配置

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',//该插件的作用是,在超过限定的文件大小时,会生成一个跟文件同名的gz包,这个时候我们需要在改下nginx的配置,启用gzip压缩,并开启gzip_static
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

　　查看文件是否被压缩的前后对比

　　  使用webpack-bundle-analyzer插件，然后在package.json文件添加script代码：

"report":"npm run build --report=true"