Module 01 · Introduction to React and Class ComponentsReact 与类组件简介
CRA versus Vite ToolCRA 与 Vite 工具对比
Estimated time needed: 3 minutes
预计所需时间：3 分钟
Introduction 简介
You can develop a React project using tools like Create React App (CRA) and Vite. Both tools serve different purposes and have different features.
您可以使用 Create React App (CRA)和 Vite 等工具来开发 React 项目。这两个工具服务于不同的目的，并具有不同的功能。
Objectives 目标
After completing this reading, you will be able to:
完成阅读后，您将能够：
- Define the importance of the CRA tool in React
定义 CRA 工具在 React 中的重要性 - Define the importance of the Vite tool in React
定义 Vite 工具在 React 中的重要性 - Compare the CRA tool with the Vite tool
比较 CRA 工具与 Vite 工具
Create React App (CRA) 创建 React 应用程序 (CRA)
CRA is a development tool introduced by the React team to help developers create React applications.
CRA 是 React 团队推出的一款开发工具，旨在帮助开发者创建 React 应用程序。
This tool sets up a development environment with all the necessary configurations and dependencies preconfigured, allowing developers to focus on building their React components and applications.
这个工具设置了一个包含所有必要配置和预配置依赖的开发环境，使开发者能够专注于构建他们的 React 组件和应用。
CRA provides a standard build toolchain based on Webpack, which includes features like module reloading, ES6+ syntax support, and production-ready builds.
CRA 提供基于 Webpack 的标准构建工具链，包括模块热重载、ES6+语法支持和生产环境构建等功能。
It's a reliable and robust solution for starting React projects, especially for beginners who want to develop small to medium-sized applications.
这是一个可靠且强大的 React 项目启动解决方案，尤其适合想要开发小型到中型应用的初学者。
To create a React project with the CRA tool, you need to give the following command:
要使用 CRA 工具创建一个 React 项目，你需要输入以下命令：
npx create-react-app your-app-name
Vite
Evan You, the creator of Vue.js, created the Vite tool. It is designed to be a fast development build tool for JavaScript projects, including multiple JavaScript frameworks.
尤雨溪，Vue.js 的创造者，创建了 Vite 工具。它被设计为用于 JavaScript 项目的快速开发构建工具，包括多个 JavaScript 框架。
Vite leverages modern ES module imports and native browser support for ES modules to provide extremely fast hot module replacement and server start times during development.
Vite 利用现代 ES 模块导入和浏览器对 ES 模块的原生支持，在开发期间提供极快的热模块替换和服务器启动时间。
Unlike CRA, which uses Webpack, Vite uses Rollup for bundling, resulting in faster build times and improved performance, especially for larger projects.
与 CRA 不同，它使用 Webpack，Vite 使用 Rollup 进行打包，从而实现更快的构建时间和更好的性能，尤其是在大型项目中。
Vite also supports various modern JavaScript features out of the box, such as TypeScript, JSX, and CSS preprocessors, without additional configuration.
Vite 也支持各种现代 JavaScript 功能，例如 TypeScript、JSX 和 CSS 预处理器，无需额外配置。
Vite's speed and simplicity make it a compelling choice for developers looking for a more efficient development experience, particularly as projects grow in size and complexity.
Vite 的速度和简洁性使其成为寻求更高效开发体验的开发者的一个有吸引力的选择，尤其是在项目规模和复杂性增长时。
To create React project with Vite, you need to use the following command:
要创建使用 Vite 的 React 项目，您需要使用以下命令：
npm create vite@latest
The above command will present you with different frameworks and libraries. You need to select React to create a React project.
上述命令将向您展示不同的框架和库。您需要选择 React 来创建一个 React 项目。
Importance of Vite Vite 的重要性
The benefits of using Vite as your development tool are the following:
使用 Vite 作为开发工具的好处如下：
- Speed: Vite's key advantage lies in its speed. With its use of native ES module imports and optimized build processes, Vite drastically reduces development server startup time and offers fast hot module replacement, leading to a more efficient development workflow.
速度：Vite 的关键优势在于其速度。通过使用原生 ES 模块导入和优化的构建过程，Vite 大幅缩短了开发服务器启动时间，并提供了快速的热模块替换，从而提高了开发工作流程的效率。 - Modern JavaScript Support: Vite embraces modern JavaScript features and syntax without the need for complex configuration, making it easier for developers to adopt and use the latest language features in their projects.
现代 JavaScript 支持：Vite 无需复杂配置即可拥抱现代 JavaScript 功能和语法，使开发者更容易采用和使用最新语言功能在其项目中。 - Simplicity: Vite's configuration is minimal and straightforward compared to more traditional build tools like Webpack. This simplicity reduces the overhead of setting up and maintaining a development environment, allowing developers to focus more on writing code.
简洁：与更传统的构建工具如 Webpack 相比，Vite 的配置更少且更直接。这种简洁性减少了设置和维护开发环境的开销，使开发者能够更多地专注于编写代码。 - Optimized Builds: Vite's use of Rollup for bundling enables efficient tree-shaking and code-splitting, resulting in smaller and faster production builds.
优化构建：Vite 使用 Rollup 进行打包，实现了高效的摇树优化和代码分割，从而生成更小、更快的生产构建。 - Community Adoption: As Vite gains popularity within the JavaScript community, it's likely to see continued development and support, with an ecosystem of plugins and tools growing around it.
社区采用：随着 Vite 在 JavaScript 社区中越来越受欢迎，它很可能会继续得到发展和支持，并围绕它形成一个插件和工具生态系统。
CRA vs Vite CRA 对比 Vite
| Desc 描述 | CRA | Vite |
|---|---|---|
| Size 大小 | 279 MB (29,32,90,669 bytes) 279 MB（29,329,066 字节） |
55.2 MB (5,79,59,612 bytes) 55.2 MB（579,59,612 字节） |
| Size on disk 磁盘大小 | 323 MB (33,91,97,952 bytes) 323 MB（33,91,97,952 字节） |
64.8 MB (6,80,30,464 bytes) 64.8 MB（6,80,30,464 字节） |
| Contains 包含 | 39,295 Files, 5,028 Folders 39,295 个文件，5,028 个文件夹 |
6,713 Files, 815 Folders 6,713 个文件，815 个文件夹 |
| React structure React 结构 | CRA has large size CRA 尺寸很大 |
Vite has less size Vite 体积更小 |
Conclusion 结论
To summarize, while Create React App (CRA) remains a solid choice for many React projects, Vite offers a compelling alternative, especially for developers looking for faster development times and modern JavaScript support.
总结来说，虽然 Create React App (CRA) 对于许多 React 项目来说仍然是一个可靠的选择，但 Vite 提供了一个有吸引力的替代方案，尤其是对于寻求更短的开发时间和现代 JavaScript 支持的开发者来说。
Author(s) 作者（们）
Richa Arora 阿罗拉·里查