vite配置gzip压缩

vite配置gzip压缩

前段时间由于贫穷，用了家里的电脑做服务器，白嫖了同事的frp,映射到同事的服务器，达到可以公网访问的目的，预感到frp相对会慢一点点，没想到这么慢 ，发现vite打包后的部分js文件过大，导致首屏加载慢等用户体验及其不佳的现象，如下图所示，js文件高大1.2M，实在接受不了，必须对vite打包优化。

1.vite中配置gzip压缩

1.1 安装vite插件vite-plugin-compression

npm i vite-plugin-compression -D

1.2 vite.config.ts文件中配置插件

import viteCompression from 'vite-plugin-compression';
  plugins: [vue(),
  Components({
    resolvers: [AntDesignVueResolver()],
  }),
  AutoImport({
    resolvers: [AntDesignVueResolver()],
  }),
  viteCompression({
    verbose: true, // 默认即可
    disable: false, //开启压缩(不禁用)，默认即可
    deleteOriginFile: false, //删除源文件
    threshold: 10240, //压缩前最小文件大小
    algorithm: 'gzip', //压缩算法
    ext: '.gz', //文件类型
  })
  ],

2. Nginx配置

nginx.config开启压缩，配置如下

gzip  on;
gzip_disable ¡°MSIE [1-6].(?!.*SV1)¡±;
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied any;
gzip_min_length 5000;
gzip_buffers 16 8k;
gzip_comp_level 6;
gzip_types text/css text/xml text/plain text/javascript application/javascript application/json application/xml application/rss+xml application/xhtml+xml;

3.开启gzip压缩后的效果展示

可以直观的看到从1.2M压缩到400+kb