痛点一：开发时冷启动慢，导致团队效率低下。其实，

• Webpack —— 提前备好一桌菜
• // webpack 启动流程 // 读取 webpack.config.js // 从 entry 开始递归解析 import/require // 通过 loaders 转换各类文件 // 生成依赖图谱 // 打包成 bundle.js // 启动 devServer
• 缺点： 全量解析 + 多次打包。导致冷启动时间随项目规模呈线性增长。
• 再看优点。一次性完成所有模块处理，适合大型项目的整体调整。
• 痛点二：热更新频繁导致重编译成本高昂。
• 痛点三：在老旧浏览器上无法利用 ESM 优势，需要额外打包转换。

• Vite —— 客人点菜。现炒现上
• // Vite 启动流程 // 启动 Koa/Connect 静态服务器 // 预建立 node_modules 依赖 // 等待浏览器请求 → 实时编译单个文件 → 返回
• 优点： 只做两件事——服务器+预建立第三方依赖，业务代码按需加载。冷启动几乎不随项目大小变化。
• 缺点： 首屏需要多请求；若依赖过多 CommonJS 转 ES 模块耗时增加；浏览器兼容性要求高，

Demo 场景：一个包含120+文件、约15000行代码的中型 Vue 项目。Webpack 冷启动需要 .2s ,Vite 仅需 .8s - 快约10倍。

第二层这方面，建立流程的本质——全量遍历 vs 两步走

Webpack 的沉重包袱

"如果你只想看一个页面却被整个应用一次性打包，让团队协作变得像排队等公交。"这是 Webpack 的常见痛点之一。

Vite 的“两件小事”与缓存哲学

• #1:  立即创建 Koa/Connect 静态服务器。只占用 ~200ms，无任何代码编译工作；这一步几乎不可测量.