vue打包添加gzip配置项方式【vue框架】

目录

• vue打包添加gzip配置项
•  关于我写这篇文章的原因
• vue3.0配置gzip 及 资源404
• 第一步:vue.config.js
• 第二步:这里使用 nginx 进行配置

npm install compression-webpack-plugin@6.1.1

yarn add compression-webpack-plugin@6.1.1

    const CompressiOnPlugin= require("compression-webpack-plugin")
    module.exports = {
        configureWebpack: {
            plugins: [
                new CompressionPlugin({
                    algorithm: "gzip", // 使用gzip压缩
                    test: /.js$|.css$|.html$/, // 匹配文件名
                    filename: "[path][base].gz", // 压缩后的文件名(保持原文件名，后缀加.gz)
                    minRatio: 0.8, // 压缩率小于0.8才会压缩
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
                  })
            ]
        }
    }

    plugins: [
      new CompressionPlugin({
        test:productionGzipExtensions, //匹配文件名
        threshold: 10240,//对超过10k的数据压缩
        deleteOriginalAssets: true //不删除源文件
      })
    ],

nginx.conf
 
   gzip  on;
	gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值，大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/Javascript application/x-Javascript text/Javascript text/css application/xml application/xml+rss; # #进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6].";