webpack配置：压缩打包

最新推荐文章于 2025-04-05 15:03:19 发布

koiyQ

最新推荐文章于 2025-04-05 15:03:19 发布

阅读量1.7k

点赞数

分类专栏： Tools 文章标签： webpack 前端

本文链接：https://blog.csdn.net/Miss_Y0/article/details/130345044

版权

Tools 专栏收录该内容

7 篇文章

订阅专栏

1、安装compression-webpack-plugin

对于webpack4不能使用太高版本的CompressionWebpackPlugin组件

npm install --save-dev compression-webpack-plugin@5.0.2

2、在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.(js|css|json|ico|svg)$/, // 匹配文件名
      algorithm: 'gzip', // 使用gzip压缩
      minRatio: 0.8,  // 压缩率小于0.8才会压缩
      threshold: 5120, // 对超过5k的数据压缩
      deleteOriginalAssets: false, // 不删除源文件
    })
  ]
}

3、服务器nginx.conf中配置

http {
	gzip on;
	gzip_static on;
	gzip_min_length 1k;
	gzip_buffers 4 32k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types text/plain application/x-javascript text/css application/xml;
	gzip_vary on;
	gzip_disable "MSIE [1-6].";
}