react项目如何编译打包

安装依赖

确保项目根目录下存在package.json文件，运行以下命令安装所有依赖：

npm install

配置环境变量

在项目根目录创建.env文件，根据需求设置环境变量。例如生产环境配置：

NODE_ENV=production
REACT_APP_API_BASE_URL=https://api.example.com

修改构建配置（可选）

如需自定义webpack配置，可通过react-app-rewired或craco覆盖默认配置。安装工具后创建config-overrides.js或craco.config.js文件：

// craco示例配置
module.exports = {
  webpack: {
    configure: {
      output: {
        filename: 'static/js/[name].[contenthash:8].js'
      }
    }
  }
}

执行构建命令

运行官方提供的构建命令，生成优化后的生产环境代码：

npm run build

或使用自定义配置工具：

npm run build --scripts-version react-scripts

输出文件结构

构建完成后会在/build目录生成以下内容：

• static/js: 经过代码分割和压缩的JavaScript文件
• static/css: 提取并优化的CSS文件
• static/media: 压缩后的图片等静态资源
• index.html: 入口HTML文件

高级优化选项

通过以下方式进一步优化构建结果：

npm install -D compression-webpack-plugin

在配置文件中添加Gzip压缩：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240
    })
  ]
}

部署准备

构建后可选择以下部署方式：

• 直接部署/build目录到静态服务器
• 使用Docker容器化部署
• 通过CI/CD工具自动化流程

常见问题处理

构建时内存不足可调整Node.js内存限制：

export NODE_OPTIONS=--max_old_space_size=4096

路径问题需在package.json中添加homepage字段：

{
  "homepage": "."
}