# 使用 Vite / CRA 构建生产版本

URL: https://caijiao.org/react/chapter17/production-build
Source: docs/react/chapter17/production-build.md
Description: 在 React 开发中，构建生产版本是部署应用的关键步骤。使用 Vite 或 Create React App (CRA) 可以方便地构建优化过的生产版本，提升应用的性能，并确保代码在生产环境中能够顺利运行。本文将介绍如何使用这两种工具来构建 React 项目的生产版本。

在 React 开发中，生产版本的构建是非常重要的一步，它可以将你的应用代码进行压缩、优化，最终生成可以部署到服务器上的静态资源文件。React 项目通常可以通过 **Vite** 或 **Create React App (CRA)** 来构建生产版本。接下来将分别介绍这两种工具的构建过程。

## 使用 Vite 构建生产版本

Vite 是一个现代化的构建工具，专为前端开发优化，提供了极速的开发体验以及高效的生产构建流程。它支持热更新、按需加载、构建时优化等功能，使得构建 React 项目非常便捷。

### 构建步骤

1. **安装 Vite 项目**:
   首先，确保你的项目已经使用 Vite 配置好了 React 项目。如果没有，可以使用以下命令创建一个新的 Vite React 项目：

   ```bash
   npm create vite@latest my-react-app --template react
   cd my-react-app
````

2. **安装依赖**:
   进入项目目录后，安装所有必要的依赖：

   ```bash
   npm install
   ```

3. **构建生产版本**:
   使用 Vite 的构建命令生成优化后的生产版本：

   ```bash
   npm run build
   ```

   该命令会生成一个 `dist` 目录，里面包含优化过的静态资源（HTML、CSS、JS 等文件），可以直接用于部署到生产环境。

4. **查看生产版本**:
   构建完成后，你可以通过以下命令来查看生产构建结果：

   ```bash
   npm run preview
   ```

   这会启动一个本地的服务器，帮助你预览构建后的应用效果。

## 使用 Create React App (CRA) 构建生产版本

Create React App (CRA) 是 React 官方推荐的脚手架工具，它为 React 项目提供了一整套默认的配置，简化了开发和构建过程。使用 CRA，你可以轻松地创建生产版本的 React 应用。

### 构建步骤

1. **安装 CRA 项目**:
   如果你已经使用 CRA 创建了项目，进入项目目录。如果没有，可以使用以下命令创建一个新的 CRA 项目：

   ```bash
   npx create-react-app my-react-app
   cd my-react-app
   ```

2. **安装依赖**:
   如果你刚创建项目并进入目录，CRA 已经为你安装了所需的依赖。

3. **构建生产版本**:
   使用 CRA 的构建命令生成生产版本：

   ```bash
   npm run build
   ```

   CRA 会自动优化你的代码，并将生成的生产版本存放在 `build` 目录下。

4. **查看生产版本**:
   在生成生产版本后，你可以通过运行以下命令来启动一个本地服务器，查看生产版本：

   ```bash
   serve -s build
   ```

   注意，你需要先安装 `serve` 依赖，使用命令 `npm install -g serve` 来全局安装它。

## 总结

使用 Vite 或 CRA 构建生产版本是 React 应用部署的重要步骤。两者都有各自的优势：

* **Vite** 提供了更快的构建速度和更好的开发体验，适合于现代前端开发。
* **CRA** 是 React 官方提供的工具，适合于较传统的构建方式，并且具有很多开箱即用的功能。

无论你选择 Vite 还是 CRA，构建生产版本的流程都非常简单，并且两者都能生成优化后的代码，提升应用的性能。