react项目如何编译
编译 React 项目的步骤
React 项目通常使用工具链（如 Create React App、Vite 或自定义 Webpack 配置）进行编译。以下是常见编译方法：
使用 Create React App (CRA) 项目 运行以下命令编译生产环境代码：
npm run build或
yarn build编译后的文件会生成在 build 目录中，包含优化过的静态资源。
使用 Vite 项目 在 Vite 项目中，生产构建命令为：
npm run build或
yarn build输出文件默认位于 dist 目录，支持现代浏览器和自动代码分割。
自定义 Webpack 配置
如果项目使用自定义 Webpack 配置，通常需要配置 webpack.config.prod.js 并运行：
webpack --config webpack.config.prod.js确保配置中包含了 React 相关的 loader（如 babel-loader）和优化插件。
环境变量配置
在编译前，可通过 .env 文件设置环境变量。例如：
REACT_APP_API_URL=https://api.example.com变量需以 REACT_APP_ 前缀开头，才能在编译时被嵌入到代码中。
优化选项
- 代码分割：通过动态
import()语法实现按需加载。 - 压缩资源：使用
TerserPlugin压缩 JavaScript，CssMinimizerPlugin压缩 CSS。 - Tree Shaking：移除未使用的代码，需确保 ES6 模块语法（
import/export）。
部署准备
编译完成后，静态文件可直接部署到 CDN 或静态托管服务（如 Netlify、Vercel）。如需服务器端渲染（SSR），需额外配置 Node.js 服务。
常见问题解决
- 内存不足：在大型项目中，可通过增加 Node.js 内存限制解决：
NODE_OPTIONS=--max_old_space_size=4096 npm run build - 路径问题：若部署到子路径，在
package.json中设置homepage字段或配置publicPath。
