如何打包create-react-app

打包 create-react-app 项目

使用 npm run build 命令可以打包 create-react-app 项目。该命令会在项目根目录下生成一个 build 文件夹，包含优化后的静态文件，可直接部署到生产环境。

优化打包配置

在 package.json 中可以通过环境变量调整打包行为。例如，设置 GENERATE_SOURCEMAP=false 禁用 source map 生成以减少文件体积：

"scripts": {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

分析打包体积

安装 source-map-explorer 分析打包文件体积分布：

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

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

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

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

代码分割

使用动态 import() 语法实现代码分割，按需加载组件：

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

自定义 webpack 配置

通过 react-app-rewired 覆盖默认配置。安装依赖：

npm install react-app-rewired --save-dev

创建 config-overrides.js 文件进行自定义配置：

module.exports = function override(config, env) {
  // 修改配置
  return config;
}

更新 package.json 中的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

部署到服务器

将 build 文件夹内容上传到服务器，配置 web 服务器（如 Nginx）指向该目录。对于单页应用，需配置所有路由回退到 index.html：

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