企业官网建设流程全解析

构建链路预算有限时先优化哪里

1. 让 Agent 参与 Vite 优化，Token 成本为什么会上升

还应把预算规则写进日常流程：超过上限时先输出构建摘要并停止额外分析，只有人工确认某个瓶颈值得投入后再扩大范围。这样不会因为一次偶发慢构建把所有分支都送去分析，也能让成本与实际收益对应起来。

把预算用在可验证的地方。先为常见分支建立基准：冷启动、热更新和发布构建分别记录耗时、缓存命中和产物差异。某次优化若只让本地机器快一点，却让 CI 更慢或产物不可复现，就不应合入。模型给出的建议可以作为排查线索，最终取舍仍以构建日志和产物校验为准。这样团队讨论的是哪一段值得投入，而不是抽象地争论要不要上 AI。

为了解决大型 Vite 项目打包体积膨胀、Rollup 拆包规则难写的工程痛点，团队尝试将 AI Agent 接入 CI/CD 构建链路。

方案是：每次 Vite 执行build时，调用 Agent 分析 Bundle Module Graph，识别重复依赖和异常体积，再由 Agent 提供manualChunks建议。

若每次构建都把完整依赖图甚至模块源码发送给模型，成本和等待时间会迅速累积。具体影响取决于依赖规模、模型、网络和调用频率，应通过 CI 日志核算，而不是套用固定数字。

2. 传统 Vite 构建痛点与 Agent 盲目调用的三大陷阱

在 Vite 构建中接入 Agent 前，先区分确定性的静态分析和需要人工判断的优化建议。

第一个陷阱是用大模型替代 Rollup 静态分析器。Rollup 内部基于 Acorn 建立的 AST 解析速度极快，在毫秒级就能计算出模块之间的导入导出关系。如果把这些基础的词法分析工作打包成巨型 Prompt 丢给 AI，是在用最昂贵的方式做最基础的操作。

第二个陷阱是没有边界的依赖图上下文。把node_modules的嵌套关系原样序列化，会显著增加 token 用量，也会让建议难以阅读和校验。

第三个陷阱是构建失败后全量重试。Agent 的输出若直接参与manualChunks，可能导致构建失败或产物变化。应校验输出、保留回退策略，并限制重试次数。

3. 任务分级与算力预算管理：把钱花在刀刃上

一种可行的分工是：本地编译器负责确定性的分析，Agent 只处理需要解释或权衡的少量摘要信息。

我们需要开发一个 Vite 插件vite-plugin-budget-agent。

首先，由 Vite 的generateBundle钩子对产物做静态预扫描。阈值（如体积或被引用次数）应来自项目预算，再将候选项整理成简短的模块摘要。

其次，挂载Token 算力配额闸门（Budget Token Gate）。设置单次构建最高消耗上限（如 2000 Token）。如果配额足够，才把裁剪后的简报推给 Agent 请求拆包建议；如果配额用尽，立刻退回本地固化的静态启发式规则。

下面的代码演示预算控制与策略加载。实际的模型调用应由项目注入，并在返回后做结构校验、人工或测试验证；示例不会伪造 Agent 的结果。

4. Vite 插件与算力预算调度示例

import { Plugin, OutputOptions } from 'vite'; import * as fs from 'fs'; import * as path from 'path'; export interface BudgetConfig { maxTokenPerBuild: number; costWarningThresholdUsd: number; storageCachePath: string; } export interface ModuleBrief { fileName: string; sizeKb: number; importedBy: string[]; } /** * 算力配额与成本 Token 控制器 */ export class TokenBudgetManager { private usedTokenCount: number = 0; private maxLimit: number; constructor(maxLimit: number) { this.maxLimit = maxLimit; } public canAfford(estimatedToken: number): boolean { return this.usedTokenCount + estimatedToken <= this.maxLimit; } public consume(tokens: number) { this.usedTokenCount += tokens; console.log(`[Vite Budget Info] 当前构建已消耗 Agent Token: ${this.usedTokenCount} / ${this.maxLimit}`); } public getUsed(): number { return this.usedTokenCount; } } /** * 由调用方接入模型或审批流程；插件不把源码或敏感路径直接上传。 */ export type ChunkStrategyRequester = (briefs: ModuleBrief[]) => Promise<Record<string, string[]>>; async function fetchAgentChunkingStrategy( briefs: ModuleBrief[], budget: TokenBudgetManager, requestStrategy?: ChunkStrategyRequester ): Promise<Record<string, string[]>> { // 简报序列化与估算 Token const payload = JSON.stringify(briefs); const estimatedToken = Math.ceil(payload.length / 3); if (!budget.canAfford(estimatedToken)) { console.warn('[Vite Budget Warning] 构建 Token 预算超出限制，降级使用本地静态拆包策略。'); return {}; } if (!requestStrategy) return {}; budget.consume(estimatedToken); return requestStrategy(briefs); } /** * Vite 算力预算治理示例 */ export function vitePluginBudgetAgent(config: BudgetConfig, requestStrategy?: ChunkStrategyRequester): Plugin { const budgetManager = new TokenBudgetManager(config.maxTokenPerBuild); let dynamicChunkMap: Record<string, string[]> = {}; return { name: 'vite-plugin-budget-agent', enforce: 'post', // 1. 构建构建阶段：注入 Rollup 分包拦截 async configResolved(resolvedConfig) { // 读取上一次经过验证的策略缓存 if (fs.existsSync(config.storageCachePath)) { try { const cachedMap = JSON.parse(fs.readFileSync(config.storageCachePath, 'utf-8')); dynamicChunkMap = cachedMap; } catch { dynamicChunkMap = {}; } } }, // 2. 配置 Rollup 的 manualChunks config(userConfig) { return { build: { rollupOptions: { output: { manualChunks(id: string) { // 根据 Agent 返回的精细规则匹配分包 for (const [chunkName, moduleKeywords] of Object.entries(dynamicChunkMap)) { if (moduleKeywords.some((kw) => id.includes(kw))) { return chunkName; } } // 本地保底静态拆包规则 if (id.includes('node_modules')) { if (id.includes('vue') || id.includes('react')) { return 'framework-core'; } } } } as OutputOptions } } }; }, // 3. 产物生成阶段：提取分析简报并为下一次构建决策 async generateBundle(options, bundle) { const suspiciousBriefs: ModuleBrief[] = []; for (const [fileName, chunkInfo] of Object.entries(bundle)) { if (chunkInfo.type === 'chunk' && chunkInfo.code.length > 200 * 1024) { suspiciousBriefs.push({ fileName, sizeKb: Math.round(chunkInfo.code.length / 1024), importedBy: Object.keys(chunkInfo.modules).slice(0, 5) // 仅截取前5个特征依赖 }); } } if (suspiciousBriefs.length > 0) { console.log(`[Vite Budget Info] 识别到 ${suspiciousBriefs.length} 个大型 Chunk，触发 Agent 精密简报分析...`); const newStrategy = await fetchAgentChunkingStrategy(suspiciousBriefs, budgetManager, requestStrategy); if (Object.keys(newStrategy).length > 0) { // 持久化 Agent 策略，供后续 CI 构建直接使用，无需重复消耗 Token fs.mkdirSync(path.dirname(config.storageCachePath), { recursive: true }); fs.writeFileSync(config.storageCachePath, JSON.stringify(newStrategy, null, 2)); console.log('[Vite Budget Info] 候选拆包策略已写入缓存；发布前请运行构建和产物回归验证。'); } } } }; }

5. 资源预算与工程治理的 Trade-offs

在 Vite 工程体系中引入 AI，需要同时考虑成本、延迟和构建的确定性。

AI 建议可以帮助解释少量难判断的候选项，但不能替代 Rollup 的静态分析和构建验证。将整张构建图交给模型，通常会增加成本、延迟和数据暴露面。

核心的治理准则是建立缓存与简报隔离：
构建预算也要按场景分开看。开发环境追求反馈速度，发布构建更在意可复现和产物体积；把两个目标放进同一条阈值里，往往会逼出不合适的配置。先把入口、依赖变化和缓存命中写入日志，才能判断慢的是安装、转换还是压缩阶段。