Skip to content

webpack打包gzip

// vue.config.js 文件
module.exports = {
    chainWebpack(config) {
        config.when(process.env.NODE_ENV !== 'development', config => {
            config.plugin('CompressionPlugin').use(
                new CompressionWebpackPlugin({
                    filename: '[path].gz', // 压缩后的文件名(保持原文件名,后缀加.gz)
                    algorithm: 'gzip', // 使用gzip压缩
                    test: /\.js$|\.css$/, // 匹配文件名
                    threshold: 10240, // 对超过10k的数据压缩
                    minRatio: 1, // 压缩率小于1才会压缩
                    deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
                })
            )
        })
}

nginx配置

server {
    listen       80;
 
    gzip on; #开启gzip (开启这个就可以了,其他是另外配置)
    gzip_disable "MSIE [1-6]."; #ie1-6浏览器时禁用gzip
    gzip_vary on; #是否在响应头添加Content-Encoding
    gzip_proxied any; #Nginx作为反向代理的时候启用,开启或者关闭后端服务器返回的结果,匹配的前提是后端服务器必须要返回包含"Via"的 header头。
    gzip_comp_level 6; #压缩级别【1-9】,越大压缩率越高,同时消耗cpu资源也越多,建议设置在6左右。 
    gzip_http_version 1.0; #识别http的协议版本
    gzip_min_length 256; #低于256kb的资源不压缩
    #需要压缩哪些响应类型的资源,多个空格隔开。不建议压缩图片
    gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml; 
    
}