前言
当下,在项目开发的过程中,对于大多数人来说,会使用 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