前端优化之开启 Gzip 压缩

2024年5月21日 198次阅读 来源: Doyle

我其实一点也不懂，上网去查看别人都没写前端怎么做，就很郁闷。自己尝试一番才知道为何没人写前端的操作步骤，因为非常简单——生成 gz 文件，上传服务器即可。所以为了避免有人和我一样懵逼，索性记录下来以供参考。开门见山直接说操作方法：

我刚好用的是 vue boilerplate 来做开发，所以直接改配置就能做到压缩：

  1. 找到 config/index.js
  2. 找到 productionGzip: false
  3. 将 false 改为 true
  4. npm i -D compression-webpack-plugin
  5. 重新允许 npm run build
  6. 可以看到生成了一些 gz 文件
  7. 其他都不用变，把原来的代码和新生成的 gz 文件一并提交到服务器上就行了
  8. 找运维给服务器开启 gzip 即可

注：webpack.prod.conf.js 里应该要有以下这段代码：

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

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
    原文作者：Doyle
    原文地址: https://segmentfault.com/a/1190000016212808
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞