#Webpack 构建优化：速度、体积与缓存

#面试题

如何同时优化 Webpack 的构建速度和线上包体积？

#构建速度

• 开启持久化缓存 cache: { type: 'filesystem' }。
• 用 include / exclude 缩小 Loader 匹配范围。
• 复用 thread-loader 或并行能力，但先确认任务足够重，避免进程通信成本。
• 减少不必要的 polyfill、Loader 和插件；开发环境使用更快的 Source Map。
• 用 stats、speed-measure 或构建分析定位真正的慢点，不凭经验盲目加缓存。

#产物体积与加载速度

• 用动态 import() 和 SplitChunksPlugin 做路由、公共依赖和大库拆分。
• 使用 ESM、正确声明 sideEffects，让 Tree Shaking 生效。
• 使用 Terser、CSS 压缩、Brotli/gzip，移除未使用资源。
• 使用内容指纹文件名、runtimeChunk 和长期缓存，避免业务发布后重新下载未变化的 vendor。
• 通过 webpack-bundle-analyzer、Performance Budget 监控异常增量。

#常见陷阱

拆分并非越细越好：请求数、RTT、模块执行和缓存命中需要一起权衡。source-map 适合线上错误还原，但 Source Map 应上传到监控平台并限制公开访问。