请解释在 Webpack 构建环境中，如何实现条件组件的按需打包？

回答思路

1. 【回答框架 1】条件组件按需打包的核心是代码分割，即利用 Webpack 的 dynamic import 将组件拆分为独立 chunk。在条件判断时使用 import() 函数，Webpack 会自动进行分包，实现仅在实际需要时才加载对应代码。
2. 【回答框架 2】具体实现中，可使用条件编译或环境变量配合 optimization.splitChunks 配置。例如在代码中根据环境变量或路由条件，动态引入不同组件模块。
3. 【回答框架 3】还需要考虑加载失败的处理、预加载策略以及多入口场景下的公用模块提取，以保证打包效果和性能优化。
4. 【回答框架 4】最终以文件体积减少、首屏加载速度和按需加载准确率为衡量指标，并通过构建分析工具验证分包效果。
5. 【关键点 1】dynamic import 是 Webpack 实现按需打包的核心机制。
6. 【关键点 2】合理配置 splitChunks 可以优化公共模块的复用。
7. 【关键点 3】按需打包需与实际加载条件紧密结合，避免过度拆分增加请求数。
8. 【易错点 1】按需打包不能解决业务逻辑上的幂等问题，只解决代码加载问题。
9. 【易错点 2】若不考虑模块加载失败的兜底，可能导致运行时错误。
10. 【易错点 3】过度拆分会产生大量小 chunk，增加网络开销，需平衡按需粒度。