react程序如何打包
打包 React 程序的基本步骤
使用 create-react-app 构建的 React 项目可以通过内置脚本直接打包。在项目根目录下运行以下命令：
npm run build该命令会在项目根目录下生成一个 build 文件夹，包含优化后的静态文件，可直接部署到服务器。
自定义打包配置
如需修改默认打包配置（如输出路径、文件名哈希等），可通过以下方式实现：
-
弹出配置（不推荐）
运行npm run eject暴露全部配置，但此操作不可逆。之后可直接修改webpack.config.js。 -
通过
craco或react-app-rewired
安装工具后创建配置文件覆盖部分配置：
npm install @craco/craco --save-dev创建 craco.config.js 文件示例：
module.exports = {
webpack: {
configure: {
output: {
filename: 'static/js/[name].bundle.js',
},
},
},
};优化打包输出
-
代码分割
使用React.lazy和Suspense实现动态导入：const OtherComponent = React.lazy(() => import('./OtherComponent')); -
环境变量配置
在.env文件中定义变量（前缀REACT_APP_）：REACT_APP_API_URL=https://api.example.com
部署打包结果
将 build 文件夹内容上传至静态服务器（如 Nginx、Apache）或托管服务（如 Vercel、Netlify）。对于单页应用，需配置服务器将所有路由指向 index.html。
分析打包体积
运行以下命令生成打包分析报告：
npm install source-map-explorer --save-dev
npx source-map-explorer 'build/static/js/*.js'注意事项
- 确保
public文件夹中的静态资源正确引用。 - 生产环境需关闭调试工具，移除
console.log可通过插件babel-plugin-transform-remove-console实现。 - 跨域问题需通过后端代理或设置 CORS 解决，不可在前端打包时硬编码敏感信息。
