概述

Vite 是一种构建工具，旨在为现在 Web 项目提供更快，更精简的开发体验。

开发环境：构建在本地浏览器 ES Module 上的服务，需要本地浏览器支持dynamic import。

生产环境：底层使用 Rollup 对代码进行编译打包压缩。默认构建以通过 script 标记支持 ESM(<script type="module">)的浏览器为目标。但也可以通过@vitejs/plugin-legacy 支持旧版浏览器。

初始化项目

vite 需要 node.js 版本>=12.0.0

• 使用 yarn

yarn create @vitejs/app

• 输入项目名
• 选择模版 react-ts
  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
• 最终生成的目录

vite-demo
├─.gitignore
├─index.html
├─package.json
├─tsconfig.json
├─vite.config.ts
└─src
   ├─App.css
   ├─App.tsx
   ├─favicon.svg
   ├─index.css
   ├─logo.svg
   └─main.tsx

• 命令行

 "scripts": {
   "dev": "vite", // 启动开发环境
   "build": "tsc && vite build", // 构建生产环境
   "serve": "vite preview" // 本地预览生产环境
 }

HMR

vite 默认集成@vitejs/plugin-react-refresh（React）以支持 HMR

TypeScript

vite 支持开箱即用的引入.ts文件，vite 使用 esbuild 将 tTypeScript 转为 JavaScript。

JSX/TSX

.jsx  和  .tsx  文件同样开箱即用。JSX 的翻译同样是通过 esbuild。

为什么 Vite 本地启动更快

本地启动

Vite 将项目中的模块分为两类来缩短启动时间：

• 依赖项：
  • 使用 esbuild 打包
  • 将打包结果缓存在 node_modules 的.vite 目录下，只有在依赖发生变化或配置变化的时候才重新打包。
• 源代码：
  • 使用浏览器原生支持的 ESM，不进行预打包，只在浏览器请求源码时进行转换（例如将 JSX 转为 JS）并按需提供源码

热更替

• 不进行打包，HMR 是在原生 ESM 上执行的
• 对模块进行 HTTP 缓存