vue项目配置gzip，优化代码解决加载慢的问题_vue gz 加载性能很差-优快云博客

本文链接：https://blog.youkuaiyun.com/Gx0525_/article/details/107642885

本文详细介绍如何通过Gzip压缩优化Vue项目的加载速度，包括安装并配置compression-webpack-plugin，以及nginx服务器的Gzip配置，有效减少文件大小，提升用户体验。

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

vue项目优化
打包上传到线上后，加载很慢，使用gzip

安装compression-webpack-plugin

cnpm install compression-webpack-plugin --save-dev

vue.config.js配置Gzip压缩

 // 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
 
module.exports = {
     //统一配置打包插件
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                threshold: 10240,//对10K以上的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets:false,//是否删除源文件
            })
        ]
    },
}

nginx配置gizp

gzip on; #开启或关闭gzip on off
gzip_min_length 5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
gzip_vary on; # 和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩

------修改后记得执行 nginx -s reload