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内置了所有必要的工具和配置，使得你可以通过一条简单的命令来生成生产构建。
准备阶段：
在开始创建生产构建之前，请确保你的项目已经通过了所有的单元测试和功能测试，以避免将bug带入生产环境。此外，检查并更新项目的依赖项也是一个好习惯，以确保使用到的是最新版本的库和工具。执行构建命令：
在项目根目录下打开终端或命令提示符，然后运行以下命令：npm run build
或者，如果你使用的是yarn作为包管理器，则运行：
yarn build
这个命令会触发CRA内置的Webpack配置，开始构建过程。构建过程中，Webpack会分析你的项目代码，应用各种优化策略，并最终生成一个优化后的、适合生产环境的构建版本。
构建结果：
构建完成后，你可以在项目的build文件夹中找到生产构建的输出。这个文件夹通常包含了HTML文件、CSS文件、JavaScript文件以及任何静态资源（如图片、字体等）。这些文件已经被优化和压缩，准备部署到生产服务器。验证构建：
虽然Create React App已经为你做了大量的优化工作，但最好还是亲自验证一下构建结果。你可以使用serve包（或其他静态文件服务器）来在本地模拟生产环境，检查应用的性能和表现是否符合预期。npx serve -s build
这条命令会启动一个静态文件服务器，将
build文件夹作为根目录提供服务。你可以通过浏览器访问http://localhost:5000（或服务器提示的其他地址）来查看你的应用。
7.6.3 自定义生产构建
虽然Create React App提供了强大的默认构建配置，但在某些情况下，你可能需要对其进行自定义以满足特定的需求。这通常涉及到修改或扩展Webpack配置。
eject命令：
Create React App提供了一个eject命令，允许你“弹出”并暴露底层的Webpack和Babel配置。然而，一旦你执行了eject，你将失去对CRA未来更新的兼容性，因此这个操作是不可逆的，并且应谨慎使用。react-app-rewired和customize-cra：
为了避免eject带来的问题，你可以使用react-app-rewired和customize-cra这两个库来在不弹出配置的情况下自定义Webpack和Babel设置。这两个库允许你通过修改config-overrides.js文件来覆盖CRA的默认配置，而无需直接修改CRA的内部文件。环境变量：
在创建生产构建时，你还可以通过设置环境变量来影响构建过程。例如，你可以使用REACT_APP_前缀的环境变量来在构建时注入全局常量，或者使用NODE_ENV环境变量来指示Webpack使用不同的配置（尽管NODE_ENV在CRA中通常会自动设置为production）。高级优化：
根据你的具体需求，你可能还需要进行一些高级的优化，如代码分割（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应用能够以最佳状态运行在生产环境中。
