Vite构建调优七月月结：从五分钟到四十五秒的构建加速全路径回顾-平芜编程栈

Vite构建调优七月月结：从五分钟到四十五秒的构建加速全路径回顾

一个中大型前端项目的生产构建耗时从5分钟压缩到45秒，这个过程中踩过的坑和积累的经验构成了一次完整的构建工程化实践。本文按"诊断→拆解→逐个击破→持续守护"的路径，回顾这一个月的工作。

一、诊断：构建时间都去哪儿了

优化的起点永远是数据。用Vite的build.reportCompressedSize和自定义插件注入计时埋点，首先回答了一个基本问题：构建的5分钟花在了哪里。

诊断结果显示三个大头：TypeScript类型检查（85秒）、Rollup打包（140秒）、代码压缩（45秒）。三者合计占用了总耗时的90%。

// 自定义Vite插件：构建各阶段耗时采集 import type { Plugin, ResolvedConfig } from 'vite'; interface TimingRecord { phase: string; startTime: number; duration: number; } function buildTimingPlugin(): Plugin { const records: TimingRecord[] = []; let config: ResolvedConfig; return { name: 'vite-plugin-build-timing', configResolved(resolvedConfig) { config = resolvedConfig; }, // 记录各构建钩子的耗时 buildStart() { records.push({ phase: 'buildStart', startTime: Date.now(), duration: 0 }); }, buildEnd() { const start = records[0].startTime; const totalDuration = Date.now() - start; // 输出构建耗时报告 console.log('\n[Build Timing] 构建耗时报告:'); console.log('─'.repeat(50)); console.log(`总耗时: ${(totalDuration / 1000).toFixed(2)}s\n`); for (const record of records) { if (record.duration > 0) { const pct = ((record.duration / totalDuration) * 100).toFixed(1); console.log( ` ${record.phase.padEnd(20)} ${record.duration}ms (${pct}%)` ); } } console.log('─'.repeat(50)); }, // 通过transform钩子粗略测量打包阶段 transform(code, id) { // 仅统计src目录下的源码转换 if (id.includes('/src/')) { const start = Date.now(); // 在下一个钩子中不太容易精确测量单个文件， // 这里采用累计策略：在closeBundle时汇总 return { code, meta: { transformStart: start } }; } return null; }, closeBundle() { // 在bundle关闭时更新打包阶段的总耗时 const endRecord = records.find(r => r.phase === 'bundleEnd'); if (endRecord) { endRecord.duration = Date.now() - endRecord.startTime; } } }; }

二、TypeScript检查加速：从85秒到15秒

TS检查慢的根本原因是每次构建都从零开始做全量类型推导。核心策略是分离类型检查与构建流程。

第一刀：fork-ts-checker替代tsc。切换到vite-plugin-checker，利用Web Worker在独立进程运行类型检查，构建主流程不再等待类型检查完成。开发模式下类型检查异步化，生产构建时仅在CI做全量检查。

第二刀：project references做增量编译。将monorepo中的多个tsconfig.json通过references串联，利用TypeScript的增量构建能力（composite: true）。修改packages/components时，不重新检查packages/utils。

// vite.config.ts：类型检查配置与构建优化 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import checker from 'vite-plugin-checker'; import path from 'node:path'; export default defineConfig({ plugins: [ react(), // 类型检查运行在独立Worker，不阻塞HMR和构建 checker({ typescript: { tsconfigPath: './tsconfig.app.json', // 仅在CI环境执行全量检查，开发模式跳过 buildMode: process.env.CI === 'true' }, overlay: { initialIsOpen: false } }) ], build: { // 目标现代浏览器，减少polyfill和语法降级开销 target: 'esnext', // CSS代码分割：按需加载样式 cssCodeSplit: true, // 资源内联阈值：小于8KB的资源base64内联，减少HTTP请求 assetsInlineLimit: 8 * 1024, rollupOptions: { output: { // 手动分包：将稳定的大型依赖分离，利用浏览器缓存 manualChunks: (id: string) => { if (id.includes('node_modules/react')) return 'react-vendor'; if (id.includes('node_modules/antd')) return 'antd-vendor'; if (id.includes('node_modules/echarts')) return 'chart-vendor'; if (id.includes('node_modules/lodash')) return 'util-vendor'; }, // 优化chunk文件名，确保内容哈希不变时文件名不变 chunkFileNames: 'assets/js/[name]-[hash:10].js', entryFileNames: 'assets/js/[name]-[hash:10].js', assetFileNames: 'assets/[ext]/[name]-[hash:10][extname]' } }, // 压缩配置：terser替换为esbuild，速度更快 minify: 'esbuild', // 生成压缩体积报告 reportCompressedSize: true, // chunk大小警告阈值 chunkSizeWarningLimit: 500 }, resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, // esbuild目标：跳过不必要的语法转换 esbuild: { target: 'esnext', // 保留JSX，让Babel或SWC处理 jsx: 'preserve' } });