这是我参与「第五届青训营 」伴学笔记创作活动的第34天，就在前几天，我们学习了Vite知识体系，下面就是我在课堂上学习的知识大概：

前言

为什么要构建工具？因为前端工程师维护的代码越来越庞大和复杂，代码的维护、打包，发布流程很繁琐，流程上产生的错误率较高，所以大家都希望有一个工具，能简化流程、减少错误率，提高效率。所以前端构建工具就是让我们舍弃繁琐重复容易出错的步骤的“自动化”工具（该段出自）里面包含六个前端构建工具。

Vite概要

Vite定位：是新一代前端构建工具。

两大组成部分：1.No-bundle开发服务，源文件无需打包。2.生产环境基于Rollup的Bundler。

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

基于原生ESM的开发服务优势：无需打包项目源代码，天然的按需加载，可以利用文件级的浏览器缓存。

Vite上手使用

Vite项目初始化： 详细的Vite知识介绍，点击开始或者是了解更多都可以查看知识点。下面是课堂上的ppt图片：

使用HMR（热替换），生产环境Tree Shaking，它们在Vite中，无需额外配置，默认开启。这些知识的详细介绍，在点击链接后也可以找到。

Vite整体架构

四个关键技术：

依赖预打包：为什么要进行预打包：1.避免node modules过多的文件请求。2.将CommonJs格式转化为ESM格式。实现原理：1.服务启动前扫描代码中用到的依赖。2.用Esbuild对依赖代码进行预打包。3.改写import语句，指定依赖，为预构建产物路径。

单文件编译：用Esbuild编写TS/JSX。优势：编译速度快。局限性：不支持类型检查，不支持语法降级到ES5。

代码压缩：Esbuild作为默认的压缩工具，替换传统的Terser、uglify.js等压缩工具。

插件机制：

Vite进阶路线

深入双引擎：

双引擎：Esbuild、rollup.js。推荐学习顺序：先了解基本使用，动手尝试各项常用配置。然后，尝试学习其插件开发。

Vite插件开发：

Vite插件开发文档在上面的Vite知识介绍链接中有，复杂程度低的插件：json加载插件。复杂程度中等的插件：Esbuild接入插件。复杂程度高的插件：官方React插件。先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路。

代码分割（拆包）

JS编译工具（Babel）

出现的原因：JavaScript语法标准繁多，浏览器支持程度不一；开发者需要用到高级语法。参考资料：babel官方站点；babel插件手册。

语法安全降级

服务端渲染（SSR）

深入了解底层标准

小结

这堂课的知识点很丰富，也很全面。谢谢大家阅读