Vite 项目优化（一）

霹雳桃

已于 2025-02-19 13:43:43 修改

阅读量839

点赞数 14

文章标签：前端性能优化

于 2025-02-19 13:39:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46087056/article/details/145727234

版权

首先，Vite和Webpack不同，它利用ES模块和原生浏览器支持来实现快速的开发服务器启动和热更新。所以优化方面可能主要集中在构建和生产环节。

之前我已经写过一些Webpack的优化方法，比如代码分割、压缩等，可以参娶我主页查看对应文章。对于vite优化应该分几个方面来考虑：开发环境的优化、生产构建的优化、以及一些通用策略。

开发环境下，Vite本身的启动速度已经很快，但可能有些配置可以进一步优化，比如调整插件、避免不必要的依赖预构建。比如，有些用户可能引入了很多插件，这可能会影响性能，需要检查是否有冗余的插件。

生产构建方面，Vite使用Rollup，所以Rollup的优化手段同样适用，比如代码分割、Tree-shaking。此外，Vite支持多核编译，可以通过配置build.minify和build.terserOptions来优化压缩。另外，静态资源处理也是一个重点，比如图片压缩、使用CDN等。

然后是代码分割，Vite默认可能不会自动分割代码，需要手动配置rollupOptions来分割vendor和按需加载的模块。这可能对减少首屏加载时间有帮助。

还有预渲染或SSR，虽然Vite本身支持SSR，但用户可能需要额外的配置来优化服务器端渲染的性能。另外，使用PWA或者Service Worker来提高缓存效率也是一个方向。

另外，依赖优化部分，Vite在第一次启动时会预构建依赖，但用户可以通过手动指定optimizeDeps.include来强制预构建某些可能被遗漏的包，避免浏览器频繁请求小模块。

还有静态资源处理，比如使用vite-plugin-compress进行Gzip或Brotli压缩，或者在构建时生成压缩版本，配合服务器端进行高效传输。

可能还需要提到分析工具，比如rollup-plugin-visualizer，帮助查看打包后的体积，找出需要优化的模块。还有按需加载，特别是对于UI库如Ant Design或Element UI，避免全量引入。

关于如何配置CDN来减少服务器压力，使用vite-plugin-cdn-import这样的插件将依赖替换为CDN链接。另外，浏览器缓存策略，通过文件名哈希来实现长期缓存。

需要注意Vite和Webpack的不同之处，比如开发环境下Vite无需打包，但生产环境下还是需要构建，所以优化重点可能在生产阶段的Rollup配置和插件使用。

最后，总结几个主要的优化点：依赖预构建配置、生产构建的压缩和代码分割、静态资源处理、利用浏览器缓存、CDN加速、按需加载和性能分析工具。确保覆盖到开发和生产环境，同时给出具体的配置示例或插件推荐，这样用户更容易理解和应用。使用 Vite 作为构建工具时，可以通过以下优化手段提升项目的性能和开发体验：

一、开发环境优化

减少依赖预构建
Vite 首次启动时会预构建项目的依赖（node_modules），但某些情况下可能重复触发构建。
- 通过 optimizeDeps.include 手动指定需要预构建的依赖，避免不必要的扫描。
```
// vite.config.js
export default {
  optimizeDeps: {
    include: ['lodash-es', 'axios'], // 强制预构建某些依赖
  },
};
```

按需加载第三方库
对 UI 库（如 Ant Design、Element Plus）使用按需加载，减少代码体积：

// 示例：Ant Design Vue
import { Button } from 'ant-design-vue';
// 搭配插件如 `vite-plugin-style-import`

避免巨型单文件
拆分大型模块为小文件，利用浏览器缓存的 ES 模块特性。

二、生产构建优化

代码压缩与 Tree Shaking
Vite 默认使用 terser 进行压缩，可通过配置进一步优化：

// vite.config.js
export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 移除 console
      },
    },
  },
};

代码分割（Code Splitting）
通过 Rollup 配置拆分公共代码和异步模块：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor'; // 将第三方库拆分为 vendor 文件
          }
        },
      },
    },
  },
};

静态资源优化
- 图片压缩：使用 vite-plugin-imagemin 自动压缩图片。
- 文件哈希命名：通过 build.assetsDir 和哈希命名实现长效缓存。
- CDN 加速：将静态资源上传至 CDN，使用 vite-plugin-cdn-import 替换资源路径。

开启 Brotli/Gzip 压缩
使用插件（如 vite-plugin-compression）生成压缩文件，配合服务器开启压缩：

// vite.config.js
import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({ algorithm: 'brotliCompress' }), // 生成 .br 文件
  ],
};

三、高级优化策略

SSR/SSG 优化
使用 Vite 的 SSR 支持或静态站点生成（如 Vitepress）提升首屏加载速度。
PWA 支持
通过 vite-plugin-pwa 添加 Service Worker，实现离线缓存和资源预加载。
性能分析工具
- 使用 rollup-plugin-visualizer 分析构建产物体积：
```
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer()],
};
```
- 通过 Chrome DevTools 的 Lighthouse 或 vite-plugin-inspect 定位性能瓶颈。
浏览器缓存策略
配置 HTTP 缓存头，对 vendor 文件设置长期缓存（如 Cache-Control: max-age=31536000）。

四、框架特定优化

Vue 项目：使用 <script setup> 语法和 vite-plugin-vue 提升编译效率。
React 项目：启用 Fast Refresh，结合 @vitejs/plugin-react 优化 HMR。

五、避免常见误区

滥用插件：仅安装必要的 Vite 插件，避免影响构建速度。
重复请求：检查是否因动态导入导致不必要的网络请求。
未利用浏览器缓存：合理配置 Cache-Control 和文件名哈希。

六、依赖管理与构建优化

避免重复依赖
使用 npm ls [package-name] 或 yarn why [package-name] 检查依赖树，解决版本冲突问题，减少冗余代码。

强制排除依赖
通过 optimizeDeps.exclude 排除不需要预构建的库（如纯 ESM 包）：

// vite.config.js
export default {
  optimizeDeps: {
    exclude: ['unnecessary-package'], // 跳过预构建
  },
};

预构建缓存控制
修改默认缓存目录（node_modules/.vite）的位置或强制更新缓存（通过删除缓存目录或添加 --force 启动参数）。

七、开发体验增强

路径别名（Alias）
缩短导入路径，减少路径复杂度：

// vite.config.js
import path from 'path';
export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

热更新（HMR）调优
对大型项目可调整 HMR 的轮询间隔或禁用部分模块的热更新：

// vite.config.js
export default {
  server: {
    hmr: {
      overlay: false, // 禁用错误遮罩（根据需求）
      protocol: 'ws', // 强制 WebSocket 协议
    },
  },
};

自定义开发服务器配置
调整端口、代理、HTTPS 等，提升本地调试效率：

// vite.config.js
export default {
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080', // API 代理
    },
    open: true, // 自动打开浏览器
  },
};

八、非传统优化手段

禁用 CSS 代码分割
对小型项目可合并 CSS 文件，减少请求数量：

// vite.config.js
export default {
  build: {
    cssCodeSplit: false, // 将所有 CSS 合并为单个文件
  },
};

使用现代浏览器语法
直接输出现代 ES 语法，减少 Polyfill 体积：

// vite.config.js
export default {
  build: {
    target: 'es2020', // 指定构建目标
  },
};

动态导入静态资源
结合 import() 实现按需加载，减少首屏资源体积：

// 示例：动态加载图片
const imageUrl = new URL('./assets/image.png', import.meta.url).href;

Service Worker 预缓存
结合 vite-plugin-pwa 预缓存关键资源：

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';
export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg}'], // 预缓存文件类型
      },
    }),
  ],
};

九、TypeScript 优化

隔离类型检查
禁用构建时类型检查（build.rollupOptions.plugins 中移除 @rollup/plugin-typescript），改用 tsc --noEmit 单独检查类型。
优化 TS 编译配置
在 tsconfig.json 中启用 "isolatedModules": true 和 "useDefineForClassFields": true，适配 Vite 的 ES 模块编译。

十、监控与分析

性能预算（Performance Budget）
使用 vite-plugin-budget 设置文件体积阈值，构建时提示超限警告：

// vite.config.js
import { budget } from 'vite-plugin-budget';
export default {
  plugins: [
    budget({
      budgets: [{ type: 'bundle', name: 'index.js', limit: '500KB' }],
    }),
  ],
};

实时构建分析
使用 vite-plugin-inspect 查看中间产物和插件处理细节：
```
npx vite --inspect
```
网络请求分析
利用 Chrome DevTools 的 Network 面板，检查是否存在冗余请求或未压缩资源。

十一、协作优化

统一 IDE 配置
共享 .editorconfig、.vscode/settings.json 等文件，确保团队代码风格一致。
Git Hook 拦截低效代码
通过 husky + lint-staged 在提交时自动运行 ESLint、Prettier 或体积检查脚本。
文档与规范
编写团队内部的 Vite 优化手册，记录常见问题解决路径（如依赖预构建失败的处理流程）。

十二、未来特性前瞻

实验性功能尝试
在安全范围内启用 Vite 实验性功能（需评估稳定性）：

// vite.config.js
export default {
  experimental: {
    renderBuiltUrl: true, // 自定义构建资源路径生成逻辑
  },
};

Rust 工具链探索
结合基于 Rust 的工具链（如 swc）替代 Babel：

// vite.config.js
export default {
  esbuild: false, // 禁用 esbuild
  plugins: [swcPlugin()], // 使用 SWC 插件
};