提升项目性能，vite+vue3+ts组合技，搭配nginx优化打包性能

2023-10-25 18:44:39

最近使用vite2.0+vue3.0+ts的项目，其中记录一下如何使用gzip压缩优化打包。项目使用nginx作为代理。

gzip压缩有两种类型:

1.前端直接打包，nginx直接拿压缩后的文件返回给客户端。

2.通过nginx做gzip压缩，将数据从服务器发送到浏览器，在浏览器进行解压。

这次项目中，我使用的是第一种方法，它的优势在于，前端打包的时候直接把文件压缩好，这样可以减少传输的数据量，从而加快加载速度。而第二种方法的优势在于，可以减少服务器的负载，从而提高服务器的性能。但是，由于nginx会对数据进行解压，所以可能会增加服务器的延迟。

这里我使用的是vite打包工具，它是一个非常流行的前端打包工具，可以大大提高前端项目的构建速度。vite使用rollup作为打包工具，rollup是一个非常强大的打包工具，可以支持多种模块格式，如ES模块、CommonJS模块等。vite还支持tree shaking，可以删除未使用代码，从而减少打包后的文件大小。

vite.config.js

module.exports = {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // ...
        },
      },
    }),
    tsconfigPaths(),
    // ...
  ],
}

在vite.config.js文件中，我使用了vue和tsconfigPaths插件，这样就可以支持vue和typescript。在templatecompilerOptions中，我设置了一些编译选项，比如模块解析器、目标等。

打包后的文件，在dist文件夹中，可以使用gzip压缩工具进行压缩。

gzip -9 dist/main.js

这样就可以将main.js文件压缩成main.js.gz文件。

然后，在nginx的配置文件中，需要设置gzip压缩。

gzip on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss;