面试题：Webpack SplitChunksPlugin与性能监控及优化的深度结合

Question

结合性能监控工具（如Lighthouse等），分析SplitChunksPlugin不同配置对前端项目性能指标（如首次加载时间、交互时间等）的影响。描述如何根据性能监控结果，动态调整SplitChunksPlugin的配置，以达到最佳性能。同时，请举例说明在实际项目中遇到的性能瓶颈，以及如何通过优化SplitChunksPlugin配置来解决这些问题。

Answer 1

SplitChunksPlugin不同配置对前端项目性能指标的影响

1. 初始加载时间
   • 默认配置：splitChunks.chunks = 'async'，只对异步加载的chunk进行分割。这意味着同步加载的chunk不会被拆分，可能导致初始加载的文件较大，从而增加首次加载时间。例如，一些公共库如lodash如果在主chunk中，会使主bundle体积增大。
   • 设置为all：splitChunks.chunks = 'all'，会对所有类型的chunk（同步和异步）进行分割。这样可以将公共代码提取出来，减少初始加载的主bundle体积，缩短首次加载时间。比如将多个页面共用的react和react - dom提取成单独的chunk，在首次加载时并行加载，加快整体加载速度。
2. 交互时间
   • 合理设置minSize：splitChunks.minSize默认值为30000（30kb）。如果设置过小，会导致过多微小的chunk产生，增加HTTP请求数，延长交互时间，因为浏览器建立HTTP连接有一定开销。例如设置为10000（10kb），可能会使一些原本可合并的代码被拆分成小文件。若设置过大，可能无法有效提取公共代码，使单个chunk体积过大，同样影响交互时间。
   • maxInitialRequests和maxAsyncRequests：splitChunks.maxInitialRequests限制初始加载时并行请求的最大数量，splitChunks.maxAsyncRequests限制异步加载时并行请求的最大数量。合理设置这两个值能避免过多请求阻塞渲染，优化交互时间。比如设置maxInitialRequests = 3，能确保在初始加载时，浏览器并行请求的数量不至于过多，防止网络拥塞。

根据性能监控结果动态调整SplitChunksPlugin配置

1. 分析性能监控数据
   • 使用Lighthouse等工具获取性能指标数据，如首次加载时间、交互时间、资源大小、请求数量等。例如，发现首次加载时间过长，且主bundle体积很大，可能需要考虑增加公共代码的提取。
2. 调整配置
   • 增加公共代码提取：若发现多个chunk中有重复代码，将splitChunks.chunks设置为'all'，并适当调整minSize和maxInitialRequests等参数。比如将minSize设为20000（20kb），既保证有效提取公共代码，又不过度拆分。
   • 控制请求数量：如果请求数量过多影响性能，适当减小maxInitialRequests和maxAsyncRequests的值。例如从默认的6调整为4，优化网络请求管理。

实际项目中的性能瓶颈及优化

1. 性能瓶颈
   • 在一个多页面应用项目中，首次加载时间过长，Lighthouse报告显示主bundle体积达到500kb，并且有多个页面共用的库如axios和moment在主chunk中。同时，交互时间也较长，因为页面渲染时需要等待主bundle完全加载解析。
2. 优化措施
   • 配置调整：将splitChunks.chunks设置为'all'，把minSize设置为15000（15kb），并设置maxInitialRequests = 5。这样将axios和moment等公共库提取成单独的chunk，主bundle体积减小到200kb左右。同时，合理的请求数量限制避免了网络拥塞。优化后，首次加载时间从原来的5秒缩短到2秒，交互时间也明显改善，页面响应更加迅速。