Vite打包render chunk时卡顿时间过长

Question

在使用 Vite 进行项目构建时，常出现打包 render chunk 阶段卡顿时间过长的问题，尤其在中大型项目中更为明显。该问题通常表现为构建进程长时间停滞在 “rendering chunks” 阶段，导致整体打包耗时显著增加。可能原因包括：动态导入过多、chunk 分包策略不合理、插件处理逻辑阻塞（如未优化的 rollup 插件）、或依赖项体积庞大且未做 externals 处理。此外，Vite 在生产环境下基于 Rollup 进行打包，若未合理配置 code splitting 和 shared chunk 提取规则，易造成 chunk 数量膨胀，加剧渲染阶段的性能瓶颈。如何优化分包策略与插件性能，成为提升 Vite 打包效率的关键。

Answer 1

一、Vite 打包 render chunk 阶段卡顿的深度解析与优化策略

1. 问题现象与初步定位

在使用 Vite 构建中大型前端项目时，开发者常遇到构建过程长时间停滞在 "rendering chunks" 阶段。该阶段属于 Rollup 的核心处理流程，负责将模块组织成最终输出的 chunk 文件并生成代码。

• 典型表现：控制台日志长时间无更新，CPU 占用高但无进度反馈
• 影响范围：CI/CD 流水线超时、本地构建效率下降、团队协作受阻
• 常见诱因：动态导入滥用、chunk 数量爆炸、未优化插件阻塞主线程

2. 根本原因分析（由浅入深）

1. 动态导入过多：频繁使用 import() 导致 chunk 分裂过度
2. 分包策略不合理：缺乏合理的 splitChunks 规则，公共模块未提取
3. Rollup 插件性能瓶颈：如 vite-plugin-svg-icons 等同步处理大量资源
4. 依赖未 external 化：庞大的第三方库（如 Lodash、Ant Design）被打包进应用
5. AST 处理复杂度高：TypeScript + JSX + 装饰器等导致模块解析缓慢
6. 磁盘 I/O 压力大：频繁读写临时文件加剧渲染延迟

3. 可视化：构建流程中的性能瓶颈路径

```mermaid
graph TD
    A[入口模块分析] --> B[依赖图构建]
    B --> C{是否启用 code splitting?}
    C -->|是| D[生成初步 chunk 切分]
    C -->|否| E[单一 bundle]
    D --> F[插件 transform 阶段]
    F --> G[rendering chunks 开始]
    G --> H[逐个 chunk 生成代码]
    H --> I[插件 renderChunk 钩子阻塞?]
    I -->|是| J[长时间卡顿]
    I -->|否| K[写入磁盘]

4. 优化方案全景图

优化维度	具体措施	预期收益	实施难度
Code Splitting	配置 manualChunks 按路由/功能拆分	减少 chunk 间依赖计算	⭐⭐
Externals	将 react/react-dom 等设为 external	降低打包体积与复杂度	⭐⭐⭐
Plugin 优化	替换 sync 插件为 async 实现	避免主线程阻塞	⭐⭐⭐⭐
Caching	启用 esbuild 缓存与持久化缓存	提升二次构建速度	⭐⭐
Tree Shaking	确保 sideEffects 配置正确	减少无效模块引入	⭐⭐⭐
Worker Pool	使用 vite-plugin-multiprocess	并行处理 render 任务	⭐⭐⭐⭐

5. 核心优化实践示例

以下是一个针对中大型项目的 vite.config.ts 分包优化片段：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor_react: ['react', 'react-dom', 'react-router-dom'],
          vendor_ui: ['antd', '@ant-design/icons'],
          utils: ['lodash-es', 'moment', 'axios'],
          charts: ['echarts', 'zrender']
        },
        // 合并小 chunk，减少总数
        inlineDynamicImports: false
      }
    },
    commonjsOptions: {
      include: [/node_modules/]
    }
  },
  plugins: [
    // 替换耗时插件，例如使用异步 SVG 处理
    svgLoader({ defaultImport: 'url' }) 
  ]
});

6. 插件性能调优关键点

Rollup 插件钩子执行顺序直接影响 render 性能，重点关注：

• transform 钩子应避免同步文件系统操作
• renderChunk 中慎用正则全局匹配或 AST 遍历
• 使用 rollup-plugin-visualizer 分析 chunk 构成
• 对大型资源预编译（如 WebAssembly 模块提前处理）
• 启用 build.moduleSideEffects: false 提升 tree-shaking 效率
• 利用 cacheDir 实现增量构建上下文复用
• 监控内存占用，防止 GC 频繁触发
• 采用 worker-loader 将 heavy task 移出主线程
• 设置 maxParallelFileOps 控制并发 I/O
• 使用 --diagnostic 参数开启详细构建日志