安装 compression-webpack-plugin

建议安装v1.1.11版本，最新版本可能会报错

$ cnpm install compression-webpack-plugin@1.1.11 -D

更改配置文件

修改 /config/index.js

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
productionGzip: true,

修改 /build/webpack.prod.config.js

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]', // asset 改为 filename
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )

最后重新构建项目

$ npm run build

可以看到构建后的项目 /static中的静态资源目录中多了后缀 .gz的压缩文件。

服务器开启gzip功能

我们服务器使用node的express，安装插件 compression

$ cnpm install compression -S

修改 app.js文件，添加中间件

const compression = require('compression');
app.use(compression())

最后重启服务器，浏览页面可以看到加载的资源文件大小比之前明显减小了。

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄