vite学习笔记

要学习 Vite，必须要了解 Vite 的特性，即 Vite 提供的功能支持，了解 Vite 在整个构建流程做的事

# 一、Vite 的特性

下面是 Vite 帮我们做的一些工作：

# 1. npm 依赖解析和预构建

- 预构建 它们可以提高页面加载速度，并将 `CommonJS / UMD` 转换为 `ESM` 格式。预构建这一步由 `esbuild` 执行，这使得 `Vite` 的冷启动时间比任何基于 `JavaScript` 的打包器都要快得多。
- 重写导入为合法的 `URL`，例如 `/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd` 以便浏览器能够正确导入它们。

依赖是强缓存的

# 2. 模块热替换

Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue单文件组件（SFC）和 React Fast Refresh 中。也通过 @prefresh/vite 对 Preact 实现了官方集成。

注意，你不需要手动设置这些 —— 当你通过 create-vite 创建应用程序时，所选模板已经为你预先配置了这些。

# 3. TypeScript

Vite使用esbuild将TypeScript转义到JavaScript

Vite仅执行转义，不进行类型检查，假定类型检查已经被 IDE 或构建过程处理了。Vite的工作中心是将源模块转化为可以在浏览器中运行的格式，类型检查与代码转换功能进行了分割。

TypeScript 编译器选项:

isolatedModules (opens new window)

esbuild只进行转义，不需要类型信息，并不支持某些特性，如const enum和隐式类导入
useDefineForClassFields (opens new window)

从Vite v2.5.0开始，此选项默认为true

# 4. Vue/JSX/TSX

.jsx 和.tsx文件开箱即用，JSX 的转义同样通过 esbuild

# 5. CSS

导入 .css 文件将会把内容插入到 <style> 标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。

@import 内联和变基 Vite内置了postcss-import，在css、sass、less文件中可以使用@import别名和URL变基，具体可以参考CSS Pre-processors (opens new window)
PostCSS

PostCSS的配置会自动应用到导入了的CSS上

注意：CSS最小化压缩会在 PostCSS之后运行，使用build.cssTarget选项。

autoprefixer 插件也是默认集成
CSS Modules

CSS module是 CSS 模块化的概念，文件名以.module.css结尾，文件里面的类名和动画名会默认的进行隔离，与VueSFC 的<style scoped>原理不同。

CSS modules行为可以通过css.modules选项进行配置。
CSS 预处理器

Vite内置支持.scss、.sass、.less、.styl和.stylus，不需要为他们安装特性的Vite插件，但必须安装预处理器的依赖
```
yarn add -D less
```
1

禁用 CSS 注入页面

这个感觉用得比较少

import './foo.css' // 样式将会注入页面

import otherStyles from './bar.css?inline' // 样式不会注入页面

1
2
3

# 6. 静态资源处理

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

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

1
2

添加一些特殊的查询参数可以更改资源被引入的方式，细节可以查看静态资源处理 (opens new window)

# 7. JSON 导入

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

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

1
2
3
4

# 8. Glob 导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js')

# 9. 动态导入

和 glob 导入类似，Vite 也支持带变量的动态导入。

# 10. WebAssembly

WebAssembly（简称 wasm），是一种新的字节码格式，目前，主流浏览器都已经支持 wasm。与 JavaScript 需要解释执行不同的是，wasm 字节码和底层机器码很相似可快速装载运行，因此性能相对于 JavaScript 解释执行有了很大的提升。

与传统的文本文件格式相比，WebAssembly 模块可以更快地加载、解析和执行，并且提供更好的跨平台兼容性。同时，WebAssembly 还可以让开发人员使用更底层、更强大的编程语言来编写 Web 应用程序，从而实现更高的性能和安全性。

WebAssembly 应用场景：游戏开发、数据密集型应用程序、桌面应用程序的 web 化。

# 11. Web Workers

应用场景有：数学运算、图像处理、大数据处理

# 12. 构建优化

CSS 代码分割
预加载指令生成
异步 Chunk 加载优化

# 二、使用 Vite 构建 Vue 项目

上次更新: 2023/12/16, 09:22:46

← webpack学习笔记 PostCSS学习笔记→