将 React 应用迁移至 Vite

前言

当下，在项目开发的过程中，对于大多数人来说，会使用 create react app 来创建 react 应用，它开箱即用，零配置，但随着项目中代码量的增加，你的项目构建时间也会随之增加，开发服务启动时间变得缓慢，代码更改后热更新也会变慢，可能会需要 2-5s 才会在页面上体现，那么能否提高构建速度，减少开发者等待的时间呢？

如何提升构建速度？

我们可以将构建工具迁移到 Vite。

Vite 是下一代前端构建工具，可以更快地构建应用程序。

Vite 的亮点

• 极速的服务启动，使用原生 ESM 文件，无需打包!
• 轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 开箱即用，对 TypeScript、JSX、CSS 等支持开箱即用。
• Rollup 构建，可选 “多页应用” 或 “库” 模式的预配置
• 通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
• 灵活的 API 和完整的 TypeScript 类型。
• 支持 React, Vue, Preact, Svelte.

创建 vite 新项目

使用以下命令创建全新的 react 应用程序。

yarn create vite my-react-app --template react 

CRA 为什么慢？

Create react app 使用 wabpack 来打包。

Vite 为什么快？

Vite 将会使用 esbuild