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