这是我参与「第四届青训营 」笔记创作活动的的第18天

本课程主要分为五个方面:

1. 构建工具的意义
2. Vite 概览介绍
3. Vite 上手实战
4. Vite 整体架构
5. Vite 进阶路线

前期准备

1. 安装 Node.js

可以选择以下一种方式：

1. 从 Node.js 官网安装 nodejs.org/en/

2. Mac, Linux 环境可以使用 nvm 进行安装 github.com/nvm-sh/nvm

   1. NVM_NODEJS_ORG_MIRROR=npmmirror.com/mirrors/nod… nvm install 16

2. 安装 pnpm

执行如下命令即可:

npm i -g pnpm
复制代码

浅谈构建工具

前端工程的痛点

核心要素——资源

• 模块化

  • ESM、CommonJS、UMD

• 资源的编译

  • 高级语法的编译

• 产物质量

  • 代码体积、代码性能

• 开发效率

  • 热更新

前端构建工具的意义

• 模块化方案

  1. 提供模块加载方案
  2. 兼容不同模块规范

• 语法转译

  1. 高级语法转译，如 Sass、TypeScript
  2. 资源加载，如图片、字体、worker

• 产物质量

  1. 产物压缩、无用代码删除、语法降级

• 开发效率

  1. 热更新

Vite 概要介绍

Vite 概览

• 定位：新一代前端构建工具

• 两大组成部分：

  1. No-bundle 开发服务，源文件无需打包
  2. 生产环境基于 Rollup 的 Bundler

• 核心特征

  1. 高性能，dev 启动速度和热更新速度非常快
  2. 简单易用，开发者体验好

业界案例

Rollup -> Vite

• 启动时间：2m15s -> 1.7s
• 更新时间：23s -> 1s 内

Webpack -> Vite

• 启动时间：2m36s -> 6s
• 热更新：13s -> 1s 内

当下问题

• 缓慢的启动：项目编译等待成本太高
• 缓慢的热更新：修改代码后不能实时更新

瓶颈：

• bundle 带来的性能开销
• JavaScript 语言的性能瓶颈

两大行业趋势

一、全球浏览器对原生 ESM 的普遍支持（目前占比 92 % 以上）

浏览器原生 ESM 支持的两大要素：

1. script 标签增加 type="module" 属性
2. 使用 ESM 模块导入导出语法

基于原生 ESM 的开发服务优势：

• 无需打包项目代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

二、基于原生语言（Go、Rust）编写前端编译工具链。如 Go 语言编写的 Esbuild、Rust 编写的 SWC

Esbuild 是基于 Golang 开发的前端工具，具备如下能力：

1. 打包器 Bundler
2. 编译器 Tranformer
3. 压缩器 Minifier

性能极高，在 Vite 中被深度使用。

内置的 Web 构建能力

Vite 开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• sass-loader
• postcss-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin
• ...

Vite 上手实战

项目初始化

输入初始化参数

启动后截图

启动完成后，打开浏览器访问对应地址即可。

使用 Sass/Scss & CSS Modules

目录结构：

引入 Header 组件：

使用静态资源

以 svg 图片为例：

除了常见的图片格式，Vite 也内置了对于 JSON 、Worker、WASM 资源的加载支持

使用 HMR

无需额外配置，自动开启

生产环境 Tree Shaking

优化原理：

1. 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除

Vite 整体架构

一系列关键技术：

依赖预打包

为什么要进行预打包：

1. 避免 node_modules 过多的文件请求
2. 将 CommonJS 格式转换为 ESM 格式

实现原理：

1. 服务器启动前扫描代码中用到的依赖
2. 用 Esbuild 对依赖代码进行预打包
3. 改写 import 语句，指定依赖为预构建产物路径

// before
import React from "react";
// after
import React from '/node_modules/.vite/react.js'
复制代码

单文件编译

用 Esbuild 编译 TS/JSX

优势：

• 编译速度提升 10 - 100 倍

局限性：

• 不支持类型检查
• 不支持语法降级到 ES5

代码压缩

Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具

压缩性能对比

插件机制

• 开发阶段：模拟 Rollup 插件机制
• 生产环境：直接使用 Rollup

插件具体兼容性可查阅 Vite Rollup Plugins

Vite 进阶路线

深入双引擎

• Esbuild 官方文档
• Rollup 官方文档

推荐学习顺序：

• 先了解基本使用，动手尝试各项常用配置
• 然后学习其插件开发

Vite 插件开发

为什么需要插件机制：

• 抽离核心逻辑
• 易于拓展

通过上述的 hook ，我们可以在不同的构建阶段插入自定义的逻辑

插件示例：

1. 开发 Vite 插件

2. 配置文件引入插件

先看文档，过一遍插件钩子的功能

然后多学习其他插件的实现，掌握套路

代码分割（拆包）

拆包前：

问题：

• 无法进行并发请求
• 缓存复用率低

拆包后：

JS 编译工具（Babel）

Babel 原理：

出现的原因：

• JavaScript 语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

参考资料：

• Babel 官方站点
• Babel 插件手册

语法安全降级

以 Promise 语法为例：

如何在构建产物中避免这类问题：

• 上层解决方案：@vitejs/plugin-legacy

• 底层原理

  • 借助 Babel 进行语法自动降级
  • 提前注入 Polyfull 实现，如 core-js、regenerator-runtime

参考资料：

• @babel/preset-env 官方文档
• Vite 官方降级插件文档

服务端渲染 SSR

一种常见的渲染模式，用于提升首屏性能和 SEO 优化

构建阶段：

代码执行阶段：

深入了解底层标准

重点特性：

• CJS 规范
• ESM 规范
• HTTP 2.0 特性

参考资料：

• ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
• Publish ESM and CJS in a single package
• 什么是PureESM

Vite 社区生态

• Github 40k+ star（可参考 webpack 61.3k rollup 21.8k），并且目前还在维护中

• 官方提供插件：

  • @vitejs/plugin-vue，提供 Vue 3 支持
  • @vitejs/plugin-vue-jsx，提供 Vue 3 JSX 支持
  • @vitejs/plugin-react，提供 React 支持
  • @vitejs/plugin-legacy，提供提版本浏览器降级支持

• 海量社区插件

  • github.com/vitejs/awes…

• 众多框架内置

  • Nuxt、SvelteKit、Astro、Vitepress