vue2项目打包压缩处理

最新推荐文章于 2025-03-06 16:13:38 发布

前端搬砖达人

最新推荐文章于 2025-03-06 16:13:38 发布

阅读量2k

点赞数 10

文章标签： vue 性能优化前端

本文链接：https://blog.youkuaiyun.com/wyq12138/article/details/135643911

版权

本文介绍了如何在Webpack3.6.0项目中使用compression-webpack-plugin来压缩JavaScript等文件，以减小体积并提升用户访问速度。配置步骤包括安装插件、修改webpack配置和确保后端服务器支持.gz文件访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平常项目打包后，js等文件会体积大，这样用户访问会慢

在这里插入图片描述

webpack优化 – compression-webpack-plugin 开启gzip

1、安装compression-webpack-plugin

这里我项目webpack版本是3.6.0，所以得安装低版本得compression-webpack-plugin，webpack版本高于这个得安装其他版本，不然会报错

npm install compression-webpack-plugin@1.1.12 -D

2、修改配置

1、在config/index.js文件中修改productionGzip: true;

2、build/webpack.prod.conf.js文件中的plugins添加下面的代码

  const 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
    })
  )
}

最后打包就可以了