《vite技术揭秘、还原与实战》阅读指南

为什么要写该专栏

一方面，是为了提升自己的影响力，比如在平台中积累人气，这其实是一笔无形的财富，它必将对日后的跳槽或转行有一定的助力

另一方面，是为了自我学习与进步。早些年，webpack大行其道，被奉为高级前端的座上宾，而当下，vite亦成为进阶的必备技能

如何获取源码

小节对应的源码可以通过github获取

关于更新进度

预计12月10日开始，每周更新2-3篇

关于本专栏

源码是最好的老师，它为我们传道、授业、解惑。但能否将其转化为自己的知识还需要我们自己去努力。笔者一直相信对比记忆是最佳的学习方式。故本小册的全部章节都由两大核心部分构成：前半部分用以分析源码；后半部分对功能点进行分析、实现与还原

本专栏假设读者已经是一个vite的深度使用者，因此笔者不会花费篇幅说明如何创建用例。不过读者仍可以从svite 的 playground 目录获得相应的用例创建参考

本专栏会同步开发一个名为svite的工程。它的目的是帮助读者更好的理解vite。读者可以把它当作对源码的总结、梳理和对比来看，但更建议读者跟着笔者思路并结合自己的思考一字一行的完成svite的编写，只有在不断的踩坑-思考-解决这一过程中才能真正的理解和掌握vite，更重要的是得到编码能力、问题处理能力和逻辑思维能力的提升

关于 svite

• 为什么不是mini-vite

这是笔者有意和市面上的手写vite进行区分的，因为它们往往只包含了vite的最原始、最小运行逻辑，而对其功能点的实现却鲜有提及，而功能点如何被落地才是vite的真正强大和值得学习之处

• svite包含哪些

svite几乎包含了vite除了ssr外的所有核心能力

• svite有什么特点

强调分析，笔者会分析为什么需要这么做，出发点是什么，具体如何实现

强调对比，笔者会尽可能用不一样的思路实现与vite同样的功能

强调简化，采取更小、更少的代码实现功能，不考虑边界

超出vite，不局限于vite源码本身，对于笔者认为比较重要而vite中采用第三方npm包实现的功能点，笔者会抛弃对npm包的调用而是带领读者从0 到1开发

• 如何开发svite

svite模拟了从0到1开发vite的迭代过程，因此，它并不会一次性对某个功能点进行全方位的讲解，比如在分析vite中如何实现依赖打包的小节中，笔者虽然对http缓存相关的属性进行了说明，但笔者认为在此处引入是一种纸上谈兵的做法，因此在svite中实现对应小节时直接选择了跳过，其真正的实现是在接入了vue3之后，由于模块文件的不断增多而作为优化需求被列入开发计划的

关于章节划分

第一章：对vite dev阶段的特性与功能点进行分析并还原

第二章：对vite build阶段的特性与功能点进行分析并还原

第三章：使用vite开发一个支持热更新的vue约定式路由解决方案

关于小节划分

本小册每一节均被划分成了4-6个部分

• 前言

以产品或业务视角，提出svite现存的问题或需要满足的功能需求

• 源码分析

通过逐行解读vite源码以找出解决svite中相关问题的实现方案

• 代码实现

分析并落地功能

• 调试

自测环节，对当前实现的功能进行调试，并对相关报错进行分析与解决

• fixbug（可选）

对前边小节的调试环节未及时发现的bug进行分析并解决

• 总结

对当前小节进行分析归纳

关于阅读建议

1.不建议读者跳小节阅读，因为每一个小节之间都具有一定的连贯性，比如，对于已经分析过的公用功能点，笔者再次遇到时，不会再次进入相关模块进行逐行分析

2.不建议花费精力和时间在本小节主题之外的逻辑上，它们有些并不重要，有些会在后边的小节中作为功能点或问题被提出并解决

3.尽可能在读完前言中的需求之后，先尝试自己在vite源码中寻找答案，在svite的实现过程中，尽可能的在笔者的思路上做进一步的思维发散

关于受众人群

• 对构建工具实现原理感兴趣的人
• 对原生JavaScript、TypeScript和node有一定的掌握和理解
• 学习源码本身是一件枯燥的事情，在业余时间去实现一个大体量的工程更是一件耗费精力的工作。因此笔者希望你是一个有恒心、有毅力、并且热爱coding的人

关于小册目录

1.揭秘pnpm create vite

2.svite工程搭建

3.本地server的创建流程

4.加载index.html

5.配置文件

6.defineConfig引发的问题思考与解决方案分析与实现

7.插件化方案设计

8.在svite中引入插件系统

9.依赖预构建--依赖扫描

10.依赖预构建--依赖打包

11.依赖预构建--依赖缓存

12.在svite中引入依赖预构建

13.模块解析器

14.借力模块解析器，让预构建全面开花

15.vite4.2引入的子路径导入是如何实现的

16.vite中实现的模块解析算法

17.import.meta.env

18.import.meta.env的数据来源

19.transformIndexHtml

20.自动打开浏览器

21.完成请求闭环

22.vite是如何处理cjs模块加载的

23.构建模块视图

24.resolve.extensions

25.热更新基础设施搭建

26.通信协议与心跳重连

27.import.meta.hot

28.视图更新与数据包生成

29.数据包响应与overlay图层

30.hot.accept与hot.invalidate

31.alias别名

32.esm模块的\_\_filename与\_\_dirname注入

33.静态资源的导入

34.资源管理中心的搭建

35.json具名导入

36.批量导入

37.import.meta.glob增强与端口号冲突优化

38.导入worker脚本

39.原生worker语法的兼容支持与原因分析

40.public目录

41.开箱即用的WebAssembly

42.原生css模块的导入与样式提取

43..module.css模块化

44.开箱即用的less预处理器

45.url与image-set

46.\@import语法支持

47.style与link标签

48.vite不支持行内样式中使用url函数的处理办法

49.vite4.4中是如何实现Lightning CSS支持的

50.视图与热更新

51.plugin-vue工程搭建与svite联调测试

52.上下文的准备与config钩子调度

53.扫描vue模块的script标签中的第三方依赖

54.template与script标签

55.将vue组件实例渲染到web浏览器

56.style标签

57.scoped、module与lang属性

58.自定义元素

59.支持sfc中使用TypeScript

60.vue模块的热更新处理

61.支持使用jsx编写vue组件

62.proxy跨域代理

63.http缓存

64.404与请求降级

65.支持导入.ts文件

66.打开vscode中的指定文件

67.支持sourcemap调试

68.rollup的兼容支持

69.rollup的构建参数准备

70.构建结果输出与public文件夹迁移

71.打包index.html入口

72.打包script标签内容

73.打包静态文件

74.打包worker脚本

75.打包数据url

76.打包commonjs

77.打包css

78.css代码分割与压缩

79.tree-shaking

80.代码压缩

81.打包vendor

82.import构建分析

83.动态import导入

84.模块预加载

85.输出构建日志

86.浏览器兼容性支持

87.unplugin-router工程搭建

88.初始化准备与入口点扫描

89.生成配置文件

90.替换客户端导入

91.重写vue-router打包文件

92.实现文件监视器

93.与客户端建立更新连接

94.实现动态路由

95.实现嵌套路由

96.实现404路由

97.实现权限路由

98.实现prompt路由

99.动态生成路由的typescript映射提示

100.client.ts的自动重定向

101.git realease 与 git tag 的自动化生成与 npm 包的自动发布

102.支持webpack