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

今天学习了Vite的相关知识。

一，本节课重点内容

本节课重点内容大致可以分为以下几点:

• 构建工具的介绍与优势和解决的问题
• Vite的介绍
• Vite与React的实战
• Vite的架构
• 最后还有Vite的进阶路线。

通过上面的内容，我由浅入深，学习了Vite的很多知识。

二，详细知识介绍

前端的核心是资源，在资源的处理上会有如下的痛点:

• 模块化的问题
• 资源编译(高级语法的编译转换的问题)
• 产物质量（代码压缩，代码体积，代码性能）
• 开发效率（热更新等）

针对这些问题，前端的打包工具随之而生。

接下来老师又介绍了什么是Vite。

定位:新一代前端构建工具
两大组成部分:
1.No-bundle开发服务,源文件无需打包
2.生产环境基于Rollup的 Bundler
核心特征
1.高性能,dev启动速度和热更新速度非常快! 2.简单易用，开发者体验好
3.Vite 关心它的发布和安装足迹； 快速安装新应用程序是一项功能。
4.Vite 打包了它的大部分依赖项，并尽可能地尝试使用现代轻量级替代方案。

接下来我们再看一下Vite的优势

快，快，快。

接下来老师又介绍了Vite快的原因。

原因一

webpack出现的比较早，那时候浏览器并不支持模块化开发，并不支持ES Modules的标准，那时候的浏览器采用的加载顺序就是从上往下的同步加载。

所以webpack需要把所有的文件都遍历完成，理清依赖关系，定义每个模块的局部变量和全局变量的覆盖顺序，打包成完整的文件后才能交给浏览器去进行加载。

而ES Modules是一种将JavaScript程序拆分为可按需导入的单独模块的机制。

这是vite之所以这么快的第一个原因。

原因二

vite在启动的时候分为 冷启动 和 热更新。

冷启动的快

我们先来说他在冷启动下的快。

Vite在冷启动的时候，将代码分为依赖和源码两部分，源码部分使用ESModules或者CommonJS拆分到很多个小的模块中，

对于依赖部分，Vite使用Esbuild对依赖进行预构建。

Esbuild使用Go语言开发，相对于JavaScript，Go语言是一种编译型语言，在编译阶段就已经将源码转译为机器码。所以比js要快很多很多。

既然底层是大名鼎鼎的Go语言，所以ES Build相比单线程异步的js，他的运行速度和运行效率是要比js快很多的。

Rollup和webpack都没有使用多线程的能力，而ES Build不同，它使用了多线程的优势。

所以也导致了Esbuild构建模块的速度比webpack快到10-100倍。

对于源码部分

Vite省略了webpack遍历打包的时间，这部分工作交给浏览器，基本没有打包的时间，Vite只是在浏览器发送对模块的请求时，拦截请求，对源码进行转换后提供给浏览器，实现了源码的动态导入。

热更新的快

vite在热更新上，不需要对所有的改动都完全重构打包，vite只会对失活的模块进行热重载，而不影响页面的其他部分。

无论项目的规模多大，Vite的热更新也是在原生的ESM上进行的，只会加载当前使用到的模块。

三，实践的例子

pnpm create vite
pnpm install
npm run dev

四，课后个人总结

这节课对于Vite的一些底层知识学到了很多，收获还是比较大的。