nginx结合vite开启gzip压缩

最新推荐文章于 2025-06-24 10:15:00 发布

原创最新推荐文章于 2025-06-24 10:15:00 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #http

js 同时被 3 个专栏收录

16 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

nginx

4 篇文章

订阅专栏

文章介绍了如何在Vite项目中引入并配置压缩插件，包括设置verbose、disable、deleteOriginFile等参数。接着，详细阐述了Nginx的gzip配置，如开启sendfile，设置gzip参数以优化静态文件压缩。测试时需移除原文件以验证gzip效果。

导入压缩插件

import compressPlugin from "vite-plugin-compression";

vite配置压缩插件


plugins: [
    vue(),
    compressPlugin({
      verbose: true, // 默认即可
      disable: false, //开启压缩(不禁用)，默认即可
      deleteOriginFile: true, //删除源文件
      threshold: 1, //压缩前最小文件大小
      algorithm: 'gzip', //压缩算法
      ext: '.gz', //文件类型
    })
  ],

nginx配置(在http层级下) 这里要注意的 sendfile on;一定要开启, 不然的话无法使用gzip功能

include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip on; 
    #开启gzip静态压缩功能
    gzip_static on; 
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10 
    gzip_comp_level 5;
    #gzip 压缩类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

4.最后测试的时候最好不要留原来的js和css文件,不然都不知道gzip到底有没有开启成功