这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

一、Vite基本概要

1. 为什么需要构建工具？

前端工程的痛点

前端工程工具的意义

image - 2023-02-17T230352.840.png

2. Vite是什么? Why Vite?

Vite 概览

定位：新一代前端构建工具
两大组成部分:
- 1.No-bundle开发服务，源文件无需打包
- 2.生产环境基于 Rollup 的 Bundler
核心特征
- 1.高性能，dev启动速度和热更新速度非常快!
- 2.简单易用，开发者体验好
业界案例
Rollup -> Vite
- 启动时间：2分15秒 -> 1.7秒
- 更新时间：23秒 -> 1秒以内
Webpack -> Vite
- 启动时间：2分36秒 -> 6秒
- 热更新从13秒 -> 1秒以内
原文链接
- Migrating a 150K LOC codebase to Vite and ESBuild: Why? (part 1/3) - DEV Community 👩‍💻👨‍💻

当下问题

缓慢的启动 -> 项目编译等待成本高
缓慢的热更新 -> 修改代码后不能实时更新
```
开发体验问题日渐显露!
```
瓶颈在哪里?
- bundle带来的性能开销
- JavaScript语言的性能瓶颈

两大行业趋势

全球浏览器对原生ESM的普遍支持(目前占比92%以上)
基于原生语言(Go、Rust)编写前端编译工具链
如Go语言编写的 Esbuild、Rust 编写的 SWC

浏览器元素ESM支持

两大要素:
- 1.script标签增加type="module”属性
- 2.使用ESM模块导入导出语法

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

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

基于Esbuild的编译性能优化
Esbuild ——基于Golang开发的前端工具,具备如下能力:
1.打包器Bundler
2.编译器Transformer
3.压缩器Minifier

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

内置的web 构建能力

Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ...
如下webpack.config.ts：
等价于如下的vite.config.ts

二、Vite 上手实战与架构解析

1. Vite上手使用

项目初始化

image - 2023-02-17T232400.504.png

输入初始化参数
启动后效果
启动完成后，打开浏览器访问对应地址即可

使用sass/scss & CSS Modules

目录结构
安装Sass
index.tsx
index.module.scss

使用 SCSS & CSS Modules

目录结构
引入Header组件

使用静态资源

目录结构
以svg图片为例
除了常见的图片格式，Vite也内置了对于 JSON、Worker、WASM资源的加载支持
- 功能 | Vite 官方中文文档 (vitejs.dev)

使用HMR

无需额外配置，自动开启

演示地址

生产环境Tree Shaking

Tree Shaking在 Vite中无需配置，默认开启!
优化原理：
- 1.基于ESM的import/export语句依赖关系，与运行时状态无关
- 2.在构建阶段将未使用到的代码进行删除

Vite的直观印象

响应迅速
开箱即用

2. Vite整体架构

image - 2023-02-17T233616.621.png

关键技术：依赖预打包

为什么要进行预打包?
- 1.避免node_modules过多的文件请求
- 2.将CommonJS格式转换为ESM格式
实现原理:
- 1.服务启动前扫描代码中用到的依赖
- 2.用Esbuild对依赖代码进行预打包
- 3.改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild 编译TS/JSX
优势：编译速度提升10-100x
局限性:
- 不支持类型检查
- 不支持语法降级到 ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js 等压缩工具

关键技术：插件机制

开发阶段 -> 模拟Rollup 插件机制
生产环境 -> 直接使用Rollup
插件兼容性具体可查阅
- Vite Rollup Plugins (patak.dev)

三、Vite进阶路线

1. 深入双引擎

参考资料
- esbuild - An extremely fast bundler for the web
- Rollup | Rollup (rollupjs.org)
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置;
- 然后学习其插件开发。

2. Vite插件开发

为什么需要插件机制?

抽离核心逻辑
易于拓展

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

image - 2023-02-17T234623.828.png

插件示例

1.开发Vite 插件
2.配置文件引入插件

image - 2023-02-17T234740.285.png

image - 2023-02-17T234742.860.png

插件开发参考资料：

Vite插件开发文档
- 插件 API | Vite 官方中文文档 (vitejs.dev)
复杂度较低的插件：
- json加载插件
- vite/json.ts at main · vitejs/vite (github.com)
复杂度中等的插件：
- Esbuild接入插件
- vite/esbuild.ts at main · vitejs/vite (github.com)
复杂度较高的插件:
- 官方React插件
- vite/packages at main · vitejs/vite (github.com)

先看文档,过―遍插件钩子的功能
然后多学习其它插件的实现，掌握套路

代码分割拆包)

拆包前
- 问题:
  - 无法进行并发请求
  - 缓存复用率低
拆包后
参考资料：
- 构建选项 | Vite 官方中文文档 (vitejs.dev)
- rollupjs.org/guide/en/#o…

JS编译工具(Babel)

Babel原理
出现的原因:
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
参考资料：
- What is Babel? · Babel (babeljs.io)
- babel-handbook/plugin-handbook.md at master · jamiebuilds/babel-handbook (github.com)

语法安全降级

以Promise语法为例，IE11没有支持
如何在构建产物中避免这类问题?
- 上层解决方案:@vitejs/plugin-legacy
- 底层原理
  - 借助Babel进行语法自动降级
  - 提前注入Polyfill 实现，如core-js、regenerator-runtime
参考资料：
- @babel/preset-env · Babel (babeljs.io)
- vite/packages/plugin-legacy at main · vitejs/vite (github.com)

服务端渲染(SSR)

—种常见的渲染模式,用于提升首屏性能和SEO优化。
- 构建阶段
代码执行阶段
参考资料：

深入了解底层标准

重点特性:
- CJS规范
- ESM规范
- HTTP 2.0特性
参考资料：

Vite 社区生态

Github 40k+ star (可参考webpack 61.3 K, rollup 21.8 k),并且目前还在持续维护
官方提供插件:
- @vitejs/plugin-vue，提供Vue 3支持
- @vitejs/plugin-vue-jsx，提供 Vue 3 JSX支持
- @vitejs/plugin-react，提供React支持
- @vitejs/plugin-legacy，提供低版本浏览器降级支持
海量社区插件
- vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js (github.com)
众多框架内置
- Nuxt
- Sveltekit
- Astro
- Vitepress