前端项目打包压缩里_compressionwebpackplugin-CSDN博客

本文链接：https://blog.csdn.net/ouyangxiaoyao25/article/details/137642593

文章介绍了如何通过前端使用compression-webpack-plugin压缩JS和CSS文件，以及在Nginx服务器上开启Gzip功能，以减少前端页面首屏加载时间，实现从2.3MB减小到600KB的效果。

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

客户反映前端页面首屏加载太慢,查了一下是前端项目打包出的js主文件太大,本文方案—前端打包使用compression-webpack-plugin插件压缩静态资源，服务端在Nginx开启Gzip属性。这样Nginx在访问资源时，如果该资源有gz文件，则会请求gz文件。
compression-webpack-plugin：是webpack压缩插件，引入该插件后，npm run build除了会生成压缩后的静态资源（JS、css），还会生成gz形式的JS、CSS。

首先安装插件compression-webpack-plugin

cnpm install compression-webpack-plugin@6.1.1

在配置文件中引入

代码:

 process.env.NODE_ENV === 'production' &&
      addWebpackPlugin(
        new CompressionPlugin({
          // asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
          algorithm: 'gzip', //算法
          test: new RegExp(
            '\\.(js|css)$' //压缩 js 与 css
          ),
          threshold: 10240, //只处理比这个值大的资源。按字节计算
          minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
        })
      )

如上操作,前端打包出的文件就会小很多, 我这边是2.3M-->600k

需要服务端配合进行Nginx配置：

nginx开启gzip压缩

    gzip  on;
    # 开启静态gz文件返回
    gzip_static on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 1k;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-icon;
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

将dist文件复制到本地Nginx的html文件中，在Nginx配置跳转：

server {
        listen       3000;
        server_name  localhost;

        location / {
            root   html;
            index  /dist/index.html;
        }
        
        location /static {
            root    html/dist;
        }
    }

在cmd中启动Nginx即可访问localhost:3000.
观察Network可以发现区别（注释Nginx的Gzip即可查看区别）