vite

构建生产版本 | Vite 官方中文文档
 部署静态站点 | Vite 官方中文文档
Vite（法语意为 “快速的”，发音 /vit/ ）是一种前端构建工具。两个部分组成：

一个开发服务器esbuild，它基于原生 ES 模块 ECMAScript Modules 提供了丰富的内建功能，如速度快到惊人的模块热替换（HMR）
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 是一种具有明确建议的工具，具备合理的默认设置。

功能

npm 依赖解析和预构建

模块热替换

TypeScript

Vite 天然支持引入 .ts 文件。

仅执行转译

请注意，Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。

客户端类型

CSS

`@import` 内联和变基

PostCSS

CSS Modules

CSS 预处理器

静态资源处理

导入一个静态资源会返回解析后的 URL：

1 2	import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl

显式内联处理

可以分别使用?inline或?no-inline后缀，明确导入带内联或不带内联的静态资源。
js

1 2	import imgUrl1 from './img.svg?no-inline' import imgUrl2 from './img.png?inline'

将资源引入为字符串

资源可以使用 ?raw 后缀声明作为字符串引入。
js

1	import shaderString from './shader.glsl?raw'

导入脚本作为 Worker

脚本可以通过 ?worker 或 ?sharedworker 后缀导入为 web worker。
js

1
2
3

// 在生产构建中将会分离出 chunk
import Worker from './shader.js?worker'
const worker = new Worker()

1
2
3

// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

1 2	// 内联为 base64 字符串 import InlineWorker from './shader.js?worker&inline'

JSON

JSON 可以被直接导入 —— 同样支持具名导入：
js

// 导入整个对象
import json from './example.json'
// 对一个根字段使用具名导入 —— 有效帮助 treeshaking！
import { field } from './example.json'

构建优化

下面所罗列的功能会自动应用为构建过程的一部分，除非你想禁用它们，否则没有必要显式配置。

CSS 代码分割

Vite 会自动地将一个异步 chunk 模块中使用到的 CSS 代码抽取出来并为其生成一个单独的文件。这个 CSS 文件将在该异步 chunk 加载完成时自动通过一个 <link> 标签载入，该异步 chunk 会保证只在 CSS 加载完毕后再执行，避免发生 FOUC 。
如果你更倾向于将所有的 CSS 抽取到一个文件中，你可以通过设置 build.cssCodeSplit 为 false 来禁用 CSS 代码分割。

预加载指令生成

Vite 会为入口 chunk 和它们在打包出的 HTML 中的直接引入自动生成 <link rel="modulepreload"> 指令。

异步 Chunk 加载优化

在实际项目中，Rollup 通常会生成 “共用” chunk —— 被两个或以上的其他 chunk 共享的 chunk。与动态导入相结合，会很容易出现下面这种场景：
Entryasync chunk Acommon chunk Casync chunk Bdynamic importdirect import
在无优化的情境下，当异步 chunk A 被导入时，浏览器将必须请求和解析 A，然后它才能弄清楚它也需要共用 chunk C。这会导致额外的网络往返：

1	Entry ---> A ---> C

Vite 将使用一个预加载步骤自动重写代码，来分割动态导入调用，以实现当 A 被请求时，C 也将同时被请求：

1	Entry ---> (A + C)

C 也可能有更深的导入，在未优化的场景中，这会导致更多的网络往返。Vite 的优化会跟踪所有的直接导入，无论导入的深度如何，都能够完全消除不必要的往返。

HMR API

必需的条件守卫

首先，请确保用一个条件语句守护所有 HMR API 的使用，这样代码就可以在生产环境中被 tree-shaking 优化：
js

1
2
3

if (import.meta.hot) {
  // HMR 代码
}