Webpack/Vite 的构建优化你做过哪些？
五个经典回答示范
我从速度和体积两方面讲：速度上，Vite 开发态按需编译、Webpack 用 cache 缓存和 thread 多进程；体积上，按路由懒加载做代码分割、tree-shaking 去掉死代码、用 bundle analyzer 找出大头依赖做替换。我在项目里把一个 2MB 的主包拆到 800KB，首屏只加载 300KB。
我优化过一个老后台的构建：先度量，构建 4 分钟、产物 12MB。逐步做：SplitChunks 抽公共依赖并配合 CDN externals、moment 换 dayjs、图标库按需引入、图片走压缩管线；速度上开启持久化缓存和 esbuild-loader 换掉 babel 转译。最终构建 90 秒、主包 2.8MB。所有改动都进了 CI 的体积检查，防止回弹。
构建优化我先分清目标：开发体验、构建时长、运行时加载三者手段不同。选型层面，新项目 Vite 的按需编译天然解决 dev 速度；存量 Webpack 项目按 ROI 排序做缓存、分包和转译器替换。产物治理靠机制：size-limit 卡阈值、可视化分析进流水线、依赖引入走 review。一次优化不如一条护栏。
追问『tree-shaking 为什么有时不生效』：CommonJS 导出没有静态结构、副作用标注缺失，要用 ESM 且配置 sideEffects；『分包策略怎么定』：按变更频率分——框架层长缓存、组件库中缓存、业务代码短缓存；『首屏 JS 怎么再压』：SSR/ Islands、动态 import 低频模块、预加载关键 chunk。
『构建优化就是把 webpack.config 里的 mode 改成 production，打包就变小变快了。』——点评：这只是一行开关，人人都会；面试官想听的是度量、分包、依赖治理和护栏机制。拿不出构建前后数字也说明没有真正做过优化。
- 打开 模拟练习，选择「前端开发」方向，限时 3 分钟作答本题。
- 对照上方答题框架，逐点检查：哪些要素没覆盖、哪里表达啰嗦。
- 用自己项目的真实经历替换框架中的占位内容，重讲一遍并录音回听。
这类题在真实面试中常被追问细节，
建议进入限时模式练一遍。