如何正确将React生产构建文件导入到其他Web项目中

各构建文件的核心作用 #

CRA默认执行npm run build生成的三类文件，各自职责完全独立，不存在内置的单文件自举加载所有资源的逻辑：

• runtime.js：Webpack生成的模块运行时引导层，核心负责管理模块依赖解析、chunk资源的路径匹配、加载缓存校验逻辑，是所有后续业务代码能够正常执行的基础，没有这个文件，其余打包代码无法完成初始化。
• 各类分包chunk文件（即你看到的chunks类文件）：按代码分割规则拆分的独立代码块，通常包含React本体、第三方依赖、静态引入的业务公共模块，这类文件不会主动触发加载，必须被提前引入页面才能被主入口识别。
• main.js：你的React应用入口打包文件，包含根组件挂载逻辑、静态资源依赖引用，执行时完全依赖前面两类文件已经完成初始化。

生产与开发环境的加载逻辑差异 #

之前开发环境下你直接引入bundle.js、0.chunk.js、main.chunk.js就能正常运行，是因为开发模式下Webpack会把runtime引导逻辑直接内联在主bundle文件里，没有单独拆分独立的runtime文件，且所有chunk的加载路径硬编码绑定到dev server根路径，不需要独立的路径解析逻辑。
生产环境拆分独立的runtime文件，本质是长期缓存优化策略：业务代码迭代时runtime的hash值变化极小，用户访问时不需要重复下载全量代码。

正确的导入流程 #

不存在“仅导入单个文件自动加载其余资源”的机制，需要手动按固定顺序引入所有依赖文件，步骤如下：

1. 在独立Web应用的页面中，预留和React应用配置完全一致的、id为root的DOM挂载节点。
2. 优先引入runtime.js，完成模块解析能力的初始化。
3. 引入所有被main.js静态依赖的公共chunk文件（通常对应build输出中static/js目录下以数字为前缀、带内容hash的分包文件）。
4. 最后引入main.js，触发React应用的挂载逻辑。

注意事项：

• 不可以颠倒文件引入顺序，否则会出现模块未定义、依赖报错的问题。Webpack生产构建不会在主入口文件中，把静态依赖的chunk加载逻辑转换成自动动态请求，而是默认所有静态依赖的js文件已经通过script标签提前加载完成。
• 只有代码中通过React.lazy、动态import()语法分割的组件，才会由runtime在执行到对应逻辑时主动请求加载对应的chunk；静态引入的依赖完全不具备自动加载能力。
• 如果React应用和独立Web应用的部署路径不一致，需要在构建React应用时调整Webpack的publicPath配置，避免runtime匹配chunk路径时出现404错误。

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