Angular生产构建开启vendorChunk拆分main与vendor包是否可行？

生产环境已启用HTTP2，目前vendorChunk配置为false，打包生成的main.js包体积约1.4MB，下载耗时约1.5秒。若开启vendorChunk将包拆分为main和vendor两个文件，每个体积可降至600-700kb，依托HTTP2的并行下载能力应该可以降低加载耗时，请问该方案是否可行？有什么相关优化建议？

方案可行性结论 #

该方案完全可行，收益明确：
HTTP/2的多路复用特性可完美支持同域名下多个资源并行请求，不存在HTTP/1.x时代的TCP连接复用限制、队头阻塞问题，拆分后两个600-700KB的文件并行下载总耗时大概率可控制在1秒以内，明显优于当前1.5秒的加载表现。
除此之外该方案还有额外的长期缓存收益：vendor包对应变化频率极低的第三方依赖，远低于业务逻辑对应的main包更新频率，后续版本迭代时用户仅需要重新下载变动的main包，无需重复拉取vendor包，站点重复访问的加载速度会有更明显的提升。

相关优化建议 #

• 不要仅做基础的双包拆分，可以进一步按照依赖类型拆分更细的独立chunk：比如把框架核心（React/Vue等）、公共工具库（Lodash/Axios等）、UI组件库分别拆包，进一步降低单包体积的同时，不同类型的依赖包可以配置差异化的缓存策略，进一步提升缓存命中率。
• 拆包后必须配置合理的强缓存规则：给vendor类依赖包的文件名加入contenthash后缀，设置响应头Cache-Control: max-age=31536000, immutable，业务代码的main包可根据迭代频率设置更短的缓存时间，最大化减少用户重复访问时的请求量。
• 所有JS资源统一开启gzip或Brotli压缩，通常可减少60%以上的资源体积，1.4MB的原始JS文件压缩后一般仅为400KB左右，加载耗时会进一步大幅降低。
• 上线前建议基于实际用户群体做灰度验证：如果你的用户群体中存在大量使用老旧客户端、走不支持HTTP/2的代理的用户，降级到HTTP/1.1后过多并行请求反而可能因为TCP握手开销、队头阻塞导致加载变慢，确认HTTP/2覆盖率达标后再全量上线。
• 配合Tree Shaking、路由级懒加载等优化手段，将非首屏的业务逻辑、依赖从首屏包中拆分出去，进一步降低首屏需要加载的资源总大小。

内容的提问来源于stack exchange，提问作者Amit Kumar