我们如何将JavaScript包的大小减少了33%
内容提要
Dropbox发现模块打包器对网页性能影响显著，旧的打包器导致代码冗余和加载缓慢，因此决定用Rollup替换。Rollup支持自动代码分割和树摇优化，成功降低了33%的包大小，提升了用户体验。
延伸解读
旧打包器的三大痛点
Dropbox 旧打包器缺乏自动代码分割和树摇优化，导致每个页面加载大量冗余代码。工程师需手动维护 6000 多行的打包映射，且因页面由多个 pagelet 组成，可能同时加载多个版本的打包代码，引发单例重复等一致性问题。这些缺陷不仅拖慢页面加载，还增加了维护成本。
选择 Rollup 的考量
Dropbox 评估多种方案后选择 Rollup，主要因其成熟、灵活且易于集成到现有构建流程。团队已用 Rollup 打包 NPM 模块，对其特性更熟悉，迁移成本低于引入全新工具。Rollup 支持自动代码分割和树摇，能直接解决旧打包器的核心问题，同时减少手动调整打包定义的需求。
渐进式迁移与挑战
迁移分四阶段，结合 cookie 和内部特性开关，逐步从 1% 放量到 100%，以便收集性能数据并快速回滚。过程中遇到 CI 内存耗尽、树摇过于激进、严格模式兼容性等问题，还发现 Rollup 生成过多 chunk 反而影响加载性能，因浏览器发现模块耗时增加且压缩效率降低。
成果与后续优化
全面上线后，JavaScript 包大小减少 33%，脚本数量减少 15%，TTVC 有适度提升，前端开发效率也因自动代码分割而提高。项目还暴露了渲染阻塞 RPC、第三方库调用过多等架构瓶颈，借助 Rollup 插件生态可进一步优化。整体上，这次迁移既带来即时收益，也为未来性能提升打下基础。
Q&A
Dropbox是如何发现旧的模块打包器存在问题的？
Dropbox发现旧的模块打包器导致代码冗余和加载缓慢，影响网页性能。
Rollup相较于旧打包器有哪些优势？
Rollup支持自动代码分割和树摇优化，成功降低了33%的包大小，提升了用户体验。
使用Rollup后，Dropbox的开发效率有什么变化？
使用Rollup后，开发人员不再需要手动调整打包定义，提高了开发效率。
Rollup的树摇优化是如何工作的？
树摇优化通过分析代码的静态结构，移除未被引用的代码，从而减少包的大小。
Dropbox在迁移到Rollup时遇到了哪些挑战？
Dropbox在迁移过程中遇到资源消耗过大、内存耗尽导致构建超时等问题。
Rollup的使用对用户体验有什么具体影响？
Rollup的使用减少了JavaScript包的大小，提高了页面加载速度，改善了用户体验。
