react项目如何编译打包

安装依赖

确保项目根目录下已安装最新版本的Node.js和npm/yarn。运行以下命令检查版本：

node -v
npm -v

配置生产环境

在package.json中确认已包含react-scripts作为开发依赖。若使用Create React App创建项目，默认会包含该依赖。必要时通过以下命令安装：

npm install react-scripts --save-dev

运行构建命令

使用React官方推荐的构建命令生成优化后的生产环境代码。在项目根目录执行：

npm run build

该命令会调用react-scripts build，自动处理代码压缩、Tree Shaking等优化操作。

输出文件分析

构建完成后会在项目根目录生成build文件夹，包含以下内容：

• 静态HTML文件（如index.html）
• 压缩后的JavaScript文件（带有hash后缀）
• 优化后的CSS文件
• 媒体资源（如图片、字体）

自定义构建配置

如需修改默认配置，可通过以下方式：

1. 创建craco.config.js或config-overrides.js文件（需安装@craco/craco或react-app-rewired）
2. 示例配置（调整输出目录）：

   module.exports = {
   paths: function(paths) {
    paths.appBuild = path.resolve(__dirname, 'dist');
    return paths;
   }
   }

部署准备

构建产物可直接部署到静态服务器。对于SPA应用，需确保服务器配置支持HTML5 History API的重定向。例如Nginx配置示例：

location / {
  try_files $uri /index.html;
}

环境变量注入

生产环境变量需通过.env.production文件定义，变量需以REACT_APP_为前缀：

REACT_APP_API_URL=https://api.example.com

构建时会自动替换代码中的环境变量。

性能优化建议

• 启用代码分割：使用React.lazy和Suspense
• 预加载关键资源：通过rel="preload"配置
• 启用gzip压缩：服务器端配置或使用compression-webpack-plugin