在 Webpack 构建配置中，如何针对公共文件进行抽取优化？
考察说明
考查对 Webpack 代码分割和缓存优化机制的理解与实践能力。
回答思路
- 【回答框架 1】Webpack 中公共文件抽取的核心机制是代码分割，主要依赖 cacheGroup 配置，将多个入口或异步模块共享的依赖模块提取到单独 chunk。
- 【回答框架 2】对于多入口应用，可通过 optimization.splitChunks 配置 cacheGroups，通过 test、priority、reuseExistingChunk 等字段控制匹配和优先级。公共依赖自动抽离，避免重复打包。
- 【回答框架 3】对于第三方库等固定依赖，可设置单独缓存组打包，利用长效缓存。建议将业务公共代码与第三方库分离，提升缓存命中率。
- 【回答框架 4】也可使用 DllPlugin 预编译库文件，但现代 Webpack 更推荐 splitChunks，其配置更灵活，且与依赖分析集成更紧密。
- 【回答框架 5】抽取后需配置合理的 chunk 文件名，并确保 HTML 模板正确引入。合理配置可减少首屏加载量，提升页面响应速度。
- 【关键点 1】splitChunks 是公共文件抽取的核心配置。
- 【关键点 2】cacheGroups 通过优先级和匹配规则控制抽取行为。
- 【关键点 3】第三方库与业务公共代码应分离，利于缓存。