React是否在浏览器中运行？构建产物中包含React的哪些部分？

1. 构建产物是否包含完整React库？ #

默认配置下，使用Vite、Webpack 4+等支持Tree Shaking的构建工具，配合ES模块版本的React包（React 17及以上版本默认提供ES模块入口），只会打包你代码中实际用到的React API，未使用的代码会被摇除，不会包含完整的React库。
如果你的项目特殊配置了使用CommonJS版本的React包，或者关闭了Tree Shaking，才会出现全量React库被打包进产物的情况。你在混淆代码中看到的非业务逻辑代码，基本都是你实际用到的React运行时代码、框架依赖垫片，以及构建工具注入的必要runtime代码。

2. 非JSX的React API构建后形态 #

• JSX代码在构建阶段会被编译器转换成标准JS函数调用：React 17之前转换为React.createElement调用，React 17及以上版本默认使用新的JSX转换，编译器会自动引入jsx/jsxs runtime函数处理JSX，无需手动在代码顶部导入React。
• 你代码中引入的useState、useEffect、memo等React API，在生产构建的混淆压缩阶段，变量名会被替换成短字符（比如useState可能被压缩为单个字母变量），但函数本身的逻辑不会被修改，仅做变量名混淆和无用代码移除。另外生产构建会自动移除所有开发环境的调试日志、警告提示、类型检查代码，进一步压缩运行时体积。

3. 浏览器调用逻辑 #

构建产物本身是符合浏览器ECMAScript规范的标准JS代码，不需要额外的解析器：

1. 浏览器加载完JS产物后，首先执行依赖的React运行时代码完成初始化，再执行你的业务代码。
2. 你代码中的入口渲染逻辑（比如ReactDOM.createRoot(rootEl).render(<App />)）构建后已经是标准的函数调用语句，浏览器会直接执行该逻辑，完成组件树的挂载和渲染，后续的状态更新、生命周期触发等逻辑，都由打包进产物的React运行时直接调度执行，不需要外部依赖。
3. 如果你手动配置了构建规则将React标记为external外置依赖，那么React不会被打包进产物，浏览器会从你配置的CDN地址加载React的UMD包，从全局React、ReactDOM变量上获取对应API调用，这类属于特殊配置，默认项目不会开启。

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