react 如何打包
打包 React 项目的基本步骤
React 项目通常使用 create-react-app (CRA) 或类似的脚手架工具初始化，打包过程可以通过内置脚本完成。
运行以下命令生成生产环境优化包：
npm run build或使用 Yarn：
yarn build打包后的文件结构
执行打包后，项目根目录下会生成 build 文件夹，包含以下关键内容：
- static/js：压缩后的 JavaScript 文件
- static/css：优化后的 CSS 文件
- index.html：入口 HTML 文件
- asset-manifest.json：资源映射文件
自定义打包配置
如果需要调整 Webpack 配置，可以执行以下操作：
对于 create-react-app 项目，运行：
npm run eject此命令会暴露 Webpack 配置，允许手动修改 webpack.config.js。
如果不想 eject，可以使用 craco（Create React App Configuration Override）进行配置：
- 安装
craco：npm install @craco/craco --save-dev - 创建
craco.config.js文件并添加自定义配置。 - 修改
package.json中的脚本："scripts": { "build": "craco build" }
优化打包体积
-
使用
source-map-explorer分析包大小：
npm install source-map-explorer --save-dev运行分析：
npx source-map-explorer 'build/static/js/*.js' -
启用代码分割（Code Splitting）：
在 React 中可以使用React.lazy和Suspense动态加载组件：const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() { return ( <React.Suspense fallback={
Loading...
}>
);
}
```
部署打包结果
打包后的 build 文件夹可直接部署到静态托管服务，如：
- Vercel：拖放
build文件夹到 Vercel 界面 - Netlify：配置构建命令为
npm run build，发布目录为build - Nginx：将
build文件夹内容复制到服务器目录并配置 Nginx 指向该路径
常见问题及解决方案
- 打包后路径错误：在
package.json中添加"homepage": "."或配置PUBLIC_URL环境变量。 - 包体积过大：使用
lodash-es替代lodash，或按需引入组件库（如antd）。 - 环境变量未生效：确保变量以
REACT_APP_开头，如REACT_APP_API_URL。
以上方法可帮助完成 React 项目的打包、优化和部署。
