Vite知识体系

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

1.重点内容

这节课就Vite在实际工程生产中的应用，构建起一套相对完整的Vite知识体系。

2.重要的知识点

Vite是什么
Vite怎么用
Vite整体架构
Vite进阶路线

3.详尽的知识点

Vite是什么？

构建工具的存在意义

由于前端的核心要素资源的种类繁多，不像其他知识体系有统一的格式或者编码。前端资源的编码格式就有很多种，这就会引起模块化，资源编译，产物质量，开发效率等等一系列问题。

对于以上的问题，构建工具给出了一下的解决方案

问题	解决方案
模块化	提供模块化加载方案，兼容不同模块的规范
语法转译	高级语法转译，资源的加载
产物质量	产物压缩，无用代码删除，语法降级
开发效率	热更新

Vite就是新一代的前端构建工具

高性能，启动速度和热更新很快
简单易用，开发者体验好

其他工具的问题

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

缓慢的本质

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

Vite怎么用

项目初始化

> npm i -g pnpm
> pnpm create vite
> pnpm install
> npm run dev

> VITE vx.x.x ready in xxxms
>
> Local:   http://127.0.0.1:xxxx/
> Network: use --host to expose

支持SASS等模块的使用

> pnpm i sass -D

支持HMR，开箱即用

支持Tree Shaking，基于ESM的语句依赖关系，去除无用代码

Vite整体架构

Vite的两大部分分为开发环境和生产环境

在开发环境中的关键技术是依赖预打包，此举可以

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

实现原理

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

此外在编译时，使用Esbuild来编译TS/JSX，使得编译速度提升10到100倍

在代码压缩时，使用Esbuild作为默认压缩工具，替换传统的压缩工具，将速度提升至500ms以内

在插件机制上，Vite在开发阶段使用Rollup插件机制，在生产环境中直接使用Rollup

Vite进阶路线

深入双引擎
插件开发
代码分割
编译工具
服务端渲染
深入了解底层标准

4.课后总结

Vite作为前端开发的构建工具，在实际生产过程中的应用非常丰富，但是作为开发人员，不应该只局限于会使用Vite，更应该在使用Vite的基础上积极参与Vite社区的构建。

Vite知识体系 | 青训营笔记