vite vue3 的配置 viteCompression

在 Vite 和 Vue3 项目的配置中，要使用 `viteCompression` 插件来压缩 JavaScript 和 CSS 文件，你可以按照以下步骤进行：

1. **安装插件**：
首先，你需要通过 npm 或 yarn 安装插件：

   npm install vite-plugin-compression @vue/compiler-sfc
   # 或者
   yarn add vite-plugin-compression @vue/compiler-sfc

`@vue/compiler-sfc` 是 Vue3 的编译器，我们需要它支持 Vue 模板。

2. **添加到 Vite 配置**：
在 `vite.config.js` 文件中，添加 `viteCompression` 到 `plugins` 数组中：

   import { createApp } from 'vue';
   import { defineConfig } from 'vite';
   import viteCompression from 'vite-plugin-compression';

   export default defineConfig({
     plugins: [
       // 其他插件...
       viteCompression({
         test: /\.(js|ts|jsx|tsx|css)$/i, // 匹配需要压缩的文件类型
         threshold: 10240, // 压缩前文件大小超过此值才压缩
         minSize: 1000, // 压缩后的最小文件大小
         useBrotli: false, // 可选，启用 Brotli 压缩，默认为 false
       }),
     ],
     // 其他配置...
   });

`test` 属性指定了哪些类型的文件会被压缩，可以根据实际需要调整。

3. **Vue3 支持**：
因为 `vite-plugin-compression` 主要是处理服务器端的静态资源，所以在 Vue3 中，确保你的模板是在服务端渲染（SSR）或预渲染（PWA）模式下才能看到压缩效果。如果你使用的是客户端渲染（CSR），则不会直接影响浏览器端的资源。

4. **启动 Vite**：
保存配置后，重启或运行 `npm run dev` 或 `yarn dev` 来让新配置生效。

现在你应该能看到压缩后的资源在生产环境中被应用了。注意检查构建输出、开发者工具以及日志输出，以确认 `viteCompression` 正常工作。