7.6创建生产构建-React全家桶--前端开发与实例(上)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(上)

### 7.6 创建生产构建

在React项目的开发过程中，我们通常会使用开发服务器（如Create React App自带的`npm start`命令启动的服务器）来快速迭代和测试应用。然而，当项目接近完成，准备部署到生产环境时，我们就需要创建一个优化过的、面向生产环境的构建版本。这个过程被称为“创建生产构建”，它涉及到代码的压缩、合并、分割、优化等步骤，以确保应用在生产环境中能够高效运行，同时减少加载时间和提高用户体验。

#### 7.6.1 为什么需要生产构建

在开发模式下，React应用为了方便调试和快速开发，会保留许多未压缩的代码、源映射（source maps）以及额外的错误检查和警告。这些特性虽然对开发者非常有用，但在生产环境中却会拖慢应用的加载速度，增加应用的体积，甚至可能暴露敏感信息。因此，生产构建的主要目标是移除这些不必要的部分，并对代码进行深度优化，以提高应用的性能和安全性。

#### 7.6.2 使用Create React App创建生产构建

如果你正在使用Create React App（CRA）作为你的项目脚手架，那么创建生产构建将变得非常简单。CRA内置了所有必要的工具和配置，使得你可以通过一条简单的命令来生成生产构建。

1. **准备阶段**：
   在开始创建生产构建之前，请确保你的项目已经通过了所有的单元测试和功能测试，以避免将bug带入生产环境。此外，检查并更新项目的依赖项也是一个好习惯，以确保使用到的是最新版本的库和工具。

2. **执行构建命令**：
   在项目根目录下打开终端或命令提示符，然后运行以下命令：
   ```bash
   npm run build
   ```
   或者，如果你使用的是yarn作为包管理器，则运行：
   ```bash
   yarn build
   ```
   这个命令会触发CRA内置的Webpack配置，开始构建过程。构建过程中，Webpack会分析你的项目代码，应用各种优化策略，并最终生成一个优化后的、适合生产环境的构建版本。

3. **构建结果**：
   构建完成后，你可以在项目的`build`文件夹中找到生产构建的输出。这个文件夹通常包含了HTML文件、CSS文件、JavaScript文件以及任何静态资源（如图片、字体等）。这些文件已经被优化和压缩，准备部署到生产服务器。

4. **验证构建**：
   虽然Create React App已经为你做了大量的优化工作，但最好还是亲自验证一下构建结果。你可以使用`serve`包（或其他静态文件服务器）来在本地模拟生产环境，检查应用的性能和表现是否符合预期。
   ```bash
   npx serve -s build
   ```
   这条命令会启动一个静态文件服务器，将`build`文件夹作为根目录提供服务。你可以通过浏览器访问`http://localhost:5000`（或服务器提示的其他地址）来查看你的应用。

#### 7.6.3 自定义生产构建

虽然Create React App提供了强大的默认构建配置，但在某些情况下，你可能需要对其进行自定义以满足特定的需求。这通常涉及到修改或扩展Webpack配置。

1. **eject命令**：
   Create React App提供了一个`eject`命令，允许你“弹出”并暴露底层的Webpack和Babel配置。然而，一旦你执行了`eject`，你将失去对CRA未来更新的兼容性，因此这个操作是不可逆的，并且应谨慎使用。

2. **react-app-rewired和customize-cra**：
   为了避免`eject`带来的问题，你可以使用`react-app-rewired`和`customize-cra`这两个库来在不弹出配置的情况下自定义Webpack和Babel设置。这两个库允许你通过修改`config-overrides.js`文件来覆盖CRA的默认配置，而无需直接修改CRA的内部文件。

3. **环境变量**：
   在创建生产构建时，你还可以通过设置环境变量来影响构建过程。例如，你可以使用`REACT_APP_`前缀的环境变量来在构建时注入全局常量，或者使用`NODE_ENV`环境变量来指示Webpack使用不同的配置（尽管`NODE_ENV`在CRA中通常会自动设置为`production`）。

4. **高级优化**：
   根据你的具体需求，你可能还需要进行一些高级的优化，如代码分割（Code Splitting）、懒加载（Lazy Loading）、预加载（Prefetching）、图片优化（如使用WebP格式）、使用PWA特性（如离线缓存、服务工作者等）等。这些优化措施可以进一步提升应用的性能和用户体验。

#### 7.6.4 部署生产构建

一旦你完成了生产构建的创建和验证，下一步就是将构建结果部署到生产服务器。部署的具体步骤取决于你选择的托管平台和服务。以下是一些常见的部署选项：

- **静态网站托管服务**：如Netlify、Vercel、GitHub Pages等，这些服务允许你通过简单的拖放或Git推送来部署静态网站。
- **Web服务器**：如Nginx、Apache等，你可以将构建结果复制到服务器的指定目录下，并通过配置服务器来提供静态文件服务。
- **云服务平台**：如AWS、Azure、Google Cloud等，这些平台提供了更丰富的服务和工具，允许你构建、部署和管理复杂的应用程序。

无论你选择哪种部署方式，都需要确保你的服务器配置正确，以便能够安全、高效地提供你的React应用。

#### 7.6.5 小结

创建生产构建是React项目开发过程中的一个重要环节。通过这个过程，我们可以将开发中的React应用优化为适合生产环境的版本，从而提高应用的性能和用户体验。在Create React App的帮助下，创建生产构建变得非常简单和直接。然而，在某些情况下，我们可能还需要对构建过程进行自定义以满足特定的需求。无论如何，最终的目标都是确保我们的React应用能够以最佳状态运行在生产环境中。

该分类下的相关小册推荐：

ReactJS面试指南

剑指Reactjs

React 进阶实践指南

深入学习React实战进阶

React全家桶--前端开发与实例(下)