前端react如何打包

打包 React 项目的步骤

安装依赖 确保项目已安装 react-scripts，通常通过 create-react-app 初始化的项目已自带。若需手动安装，运行以下命令：

npm install react-scripts --save-dev

配置打包脚本 在 package.json 的 scripts 部分添加打包命令：

"scripts": {
  "build": "react-scripts build"
}

运行打包命令 执行以下命令生成优化后的生产环境代码：

npm run build

打包后的文件会输出到项目根目录下的 build 文件夹中，包含静态 HTML、CSS 和 JavaScript 文件。

自定义打包配置

使用环境变量 在项目根目录创建 .env 文件，定义环境变量：

REACT_APP_API_URL=https://api.example.com

变量需以 REACT_APP_ 前缀开头，可在代码中通过 process.env.REACT_APP_API_URL 访问。

修改输出目录 通过 BUILD_PATH 环境变量指定输出路径：

BUILD_PATH=./dist

高级优化

代码分割 使用 React.lazy 和 Suspense 实现动态导入组件：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

在路由配置或按需加载场景中应用。

分析打包体积 安装 source-map-explorer 分析生成的文件：

npm install source-map-explorer --save-dev

在 package.json 中添加分析脚本：

"scripts": {
  "analyze": "source-map-explorer build/static/js/*.js"
}

运行 npm run build 后执行 npm run analyze 查看结果。

部署到服务器

静态文件服务 将 build 文件夹内容上传至 Web 服务器（如 Nginx、Apache）的静态资源目录。Nginx 配置示例：

server {
  listen 80;
  server_name example.com;
  root /path/to/build;
  index index.html;
  location / {
    try_files $uri /index.html;
  }
}

CDN 加速 在 package.json 中设置 PUBLIC_URL 指向 CDN 地址：

PUBLIC_URL=https://cdn.example.com

重新打包后，所有资源路径将自动指向该 CDN。

注意事项

• 确保 build 文件夹在版本控制中被忽略（如添加到 .gitignore）。
• 若需兼容旧浏览器，在 package.json 中指定 browserslist 配置。
• 使用 HTTPS 本地测试时，设置 HTTPS=true 环境变量。