react项目前端如何打包

安装必要依赖

确保项目已安装 react-scripts（Create React App 项目默认包含）或自定义构建工具（如 webpack、vite）。若使用 Create React App，无需额外安装；若手动配置，需安装 webpack、babel-loader 等依赖。

npm install webpack webpack-cli babel-loader @babel/preset-react --save-dev

配置构建脚本

在 package.json 的 scripts 部分添加打包命令。Create React App 项目默认已包含：

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

自定义 Webpack 配置需创建 webpack.config.js 文件并定义入口、输出和加载器规则。

运行打包命令

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

npm run build

打包完成后，代码会输出到 build 或 dist 目录（取决于配置）。

优化静态资源

• 代码分割：通过动态导入（React.lazy 和 Suspense）或 Webpack 的 SplitChunksPlugin 拆分代码。
• 压缩资源：使用 compression-webpack-plugin 生成 .gz 文件，或通过服务器配置 Brotli 压缩。
• CDN 加速：在 webpack.config.js 中配置 output.publicPath 指向 CDN 地址。

部署到服务器

将 build 目录内容上传至服务器，并通过 Nginx 或 Apache 配置静态文件服务。例如 Nginx 配置：

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

环境变量配置

生产环境变量需通过 .env.production 文件或构建时注入。Create React App 支持以 REACT_APP_ 开头的变量：

REACT_APP_API_URL=https://api.example.com

分析打包体积

使用 source-map-explorer 或 webpack-bundle-analyzer 分析模块体积：

npm install source-map-explorer --save-dev
npx source-map-explorer build/static/js/*.js

启用 PWA（可选）

通过 workbox-webpack-plugin 或 Create React App 内置的 PWA 模板生成离线支持：

npx create-react-app my-app --template cra-template-pwa