react项目如何打包

打包 React 项目的步骤

安装依赖
确保项目根目录下已安装最新版本的 react-scripts，它是 Create React App (CRA) 的核心工具。运行以下命令检查或更新：

npm install react-scripts@latest

构建生产版本
使用以下命令生成优化后的生产环境代码，代码会被压缩并移除开发工具：

npm run build

或（若使用 Yarn）：

yarn build

输出目录结构
打包完成后，项目根目录下会生成 build 文件夹，包含以下内容：

• static/js：压缩后的 JavaScript 文件
• static/css：优化后的 CSS 文件
• index.html：入口 HTML 文件
• 其他静态资源（如图片）

自定义配置（可选）
修改 package.json 中的 build 脚本以调整行为，例如添加环境变量：

"scripts": {
  "build": "REACT_APP_ENV=production react-scripts build"
}

部署打包结果
将 build 文件夹内的内容上传至 Web 服务器（如 Nginx、Apache）或静态托管服务（如 Vercel、Netlify）。

注意事项

• 确保 public 目录下的文件（如 favicon.ico、manifest.json）已正确配置，它们会被直接复制到 build 文件夹。
• 若需分析打包体积，可安装 source-map-explorer 并运行：

  npx source-map-explorer 'build/static/js/*.js'