Google Closure Compiler与React及Create-React-App集成相关问题咨询

1. 该集成方案是否可实现？ #

完全可以实现。针对Create-React-App（以下简称CRA）项目，你可以通过react-app-rewired+customize-cra覆盖默认配置，或是eject项目后修改构建配置的方式接入。通用React项目则可以直接作为Webpack插件接入，或是替换整个构建链路使用Closure Compiler作为核心构建工具。

2. 是否可以像Webpack一样完整支持React的全部特性？ #

默认配置下无法完全对齐Webpack的兼容性，你遇到的Code Splitting失效、组件错误内联都是非常普遍的问题。
激进的高级优化模式会默认执行高强度的死代码裁剪、函数内联逻辑，对React的lazy/Suspense动态导入、JSX运行时转换的兼容需要额外配置，对React 18的并发渲染、自动批处理等新特性，还需要搭配最新版编译器和对应的API声明文件才能正常运行。
如果仅开启简单优化模式，可以完整支持所有React特性，但对应的体积优化收益会大幅缩水，和常规的terser压缩差距不大。

3. 应该替代Webpack使用，还是作为Webpack的补充工具使用？ #

绝大多数场景下更推荐作为Webpack的补充工具使用，放在现有构建链路的压缩环节，替代默认的terser做代码压缩即可，不需要改动现有构建的核心逻辑，适配成本极低。
完全替代Webpack的成本非常高，你需要自行处理样式编译、静态资源处理、开发环境热更新等Webpack已经内置的能力，仅适合对打包体积有极致要求的小型React项目选择。

4. 替代Webpack并开启高级优化功能，能否得到体积更小的打包产物？ #

只要配置正确，产物体积肯定会比默认CRA/Webpack+terser的构建结果更小，通常体积缩减幅度在15%到30%之间，业务逻辑占比越高的中大型项目优化收益越明显。需要注意的是如果配置错误导致React核心API被错误裁剪，会直接导致项目运行时崩溃，必须搭配完整的测试流程验证构建结果。

5. 需要对现有代码做哪些修改？ #

• 必须引入完整的React、ReactDOM对应的API声明文件（externs），避免编译器把React核心API判定为未使用代码删除
• 所有import()动态导入语句需要添加编译器识别的副作用注释，避免被判定为无副作用代码裁剪，解决Code Splitting失效问题
• 避免在组件中使用字符串形式的ref、隐式全局变量声明，这类语法在高级优化模式下会被重命名导致运行失效
• 第三方依赖建议单独拆分为vendor包，不参与Closure Compiler的高级优化，或是引入对应依赖的API声明文件
• 未eject的CRA项目需要先安装react-app-rewired和customize-cra工具，覆盖默认的压缩配置接入Closure Compiler

6. 有没有相关的官方文档或示例项目可供参考？ #

Closure Compiler官方文档有专门的React适配章节，公开代码托管平台有现成的CRA+Closure Compiler的项目模板，customize-cra的相关文档也包含了对应插件的配置示例，适配CRA的配置可以直接搜索react-app-rewire-closure-compiler的相关说明即可。

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