vue项目优化点：开启gzip压缩

前言

相信大家在面试或者看一些关于前端的优化问题到时候，一定有一个绕不开的点------>开启压缩；
那么到底如何使用呢，我带领大家一步步实现这个功能

---

如何实现gzip压缩

本案例使用的是vite，如果使用的是webpack请自行查阅webpack的压缩配置
在项目中安装vite-plugin-compression

pnpm install vite-plugin-compression --save-dev

配置

export default ({ mode }) => {
  return defineConfig({
    define: {
      __VUE_OPTIONS_API__: false,
    },
    plugins: [
      viteCompression({
        // 压缩的算法，默认是 'gzip'，也可以设置为 'brotli'
        algorithm: "gzip",
        // 压缩的扩展名，默认是 ['js', 'mjs', 'json', 'css']
        ext: ".gz",
        // 压缩的级别，默认是 6，可以是 1 到 9 的数字，1 表示最快但压缩率最低，9 表示最慢但压缩率最高
        threshold: 10240, // 只处理大于10KB的文件
        // 是否删除原始文件，默认是 false
        deleteOriginFile: false,
      }),
    ],
  });
};

当打包结束的时候会发现哪些文件大于10kb的文件会生成一个gz压缩包

nginx配置

由于开启压缩之后，需要修改配置，这里以nginx为例，其他请自行查找配置

		gzip on;
		gzip_static on;
		gzip_min_length 1k;
		gzip_buffers 4 16k;
		gzip_comp_level 2;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/png image/jpeg image/svg+xml image/gif;
		gzip_vary off;
		gzip_disable "MSIE [1-6].";

运行结果

没有使用gzip压缩：

文件最大的有1.1M；再看一下Lighthouse分析报告

当开启gzip后：

原本最大的1.1M文件直接缩小成346kb；再看一下Lighthouse分析报告

总结

以上就是关于vite打包开启gzip压缩的全部内容了，更多详细内容可以查看nginx的文档；如有错误，请各位指出