35｜Vite原理：写一个迷你的Vite
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。
上一讲学完了 Vue 的编译原理后，我们就把 Vue 的整体流程梳理完毕了，但是我们在使用 Vue 的时候，还会用到很多 Vue 生态的库。所以从今天开始，我会带你了解几个 Vue 生态中重要成员的原理和源码，今天我先带你剖析一下我们项目中用的工程化工具 Vite 的原理。
现在工程化的痛点
现在前端开发项目的时候，工程化工具已经成为了标准配置，webpack 是现在使用率最高的工程化框架，它可以很好地帮助我们完成从代码调试到打包的全过程，但是随着项目规模的爆炸式增长，webpack 也带来了一些痛点问题。
最早 webpack 可以帮助我们在 JavaScript 文件中使用 require 导入其他 JavaScript、CSS、image 等文件，并且提供了 dev-server 启动测试服务器，极大地提高了我们开发项目的效率。
webpack 的核心原理就是通过分析 JavaScript 中的 require 语句，分析出当前 JavaScript 文件所有的依赖文件，然后递归分析之后，就得到了整个项目的一个依赖图。对图中不同格式的文件执行不同的 loader，比如会把 CSS 文件解析成加载 CSS 标签的 JavaScript 代码，最后基于这个依赖图获取所有的文件。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vite: 通过浏览器模块功能实现前端工程化 Vite是一个旨在解决前端项目中使用webpack打包时出现的痛点问题的工程化工具。本文介绍了Vite的原理，通过分析浏览器的module功能和使用Koa搭建server来实现Vite的迷你版本。Vite利用浏览器的module功能，通过拦截网络请求、重写路径、解析.vue文件和处理CSS文件等方式，实现了在浏览器中对Vue组件的渲染。相比于webpack，Vite的原理更加轻量，能够提高开发效率，特别是在大型项目中能够显著减少调试等待时间。此外，Vite的热更新功能也得到了详细介绍，通过WebSocket通信实现了代码修改后浏览器自动渲染更新的功能。Vite的快速响应和对任何框架的支持，以及使用esbuild解析JavaScript文件的性能优势，使其在前端工程化领域备受青睐。最后，留下一个思考题，如何处理Vite首页加载大量JavaScript文件造成卡顿的情况。这篇文章为读者提供了对Vite原理和特点的全面了解，对前端工程化感兴趣的读者值得一读。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(12)
- 最新
- 精选
特供版流程： 1. 请求 首页http://xxx.xxx.xxx/ 2. 返回 index.html 3. 请求 /src/main.js 4. 发现请求js文件，替换路径为相对路径后，返回修改后的js文件 5. 请求 @module/vue 6. 发现请求@module内的文件，替换文件内为相对路径后，返回package.json中module定义的入口文件 7. 请求 ./App.vue 8. 判断 .vue 的请求后，通过 compilerSFC.parse解析 Vue 组件，通过返回的 descriptor.script 获取 js 代码 9. 请求 ./App.vue?type=template 10. 调用 compilerDom.compile 解析 template 内容，直接返回 render 函数作者回复: very good
2022-01-1411
tequ1lAneio有源码吗，一直在报process未定义的错误作者回复: 这部分源码在这里 https://github.com/shengxinjing/geektime-vue-course/tree/main/vite-mini
2022-01-1623
润培模块如果是分散的，可以使用“依赖预构建”，通过预构建生成一个模块，这样只会有一个 http 请求。 https://cn.vitejs.dev/guide/dep-pre-bundling.html https://cn.vitejs.dev/config/#dep-optimization-options作者回复: 赞
2022-01-103
吴颜写的太简单，你这也没写出一个迷你的vite啊作者回复: 只实现了核心的node_module以及.vue和css文件的解析
2022-01-162
Chen.Lu【Vite 热更新】小模块中 chalk 是定义 log 颜色的工具，不是监听文件/文件夹的工具吧。 chokidar 是监听文件/文件夹的工具作者回复: 感谢提醒 fix 下面一句就说的是chokidar
2022-01-16- InfoQ_e521a4ce8a54从[Vite 的热更新]开始，代码片段所在的文件目录和所需的依赖就搞不清楚了。。。
作者回复: 现在代码都集中推到这个仓库里 https://github.com/shengxinjing/geektime-vue-course
2022-01-102 
若川我之前也写过一篇mini-vue的分析文章，感兴趣的可以结合大圣老师的文章对比看看实现～ 尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理 https://juejin.cn/post/70213062580575928622022-01-1821
Geek_37g热更新源码在哪儿呢？2023-07-06归属地：广东1- Geek_07f3c3vite打包时提示包体积过大，请问应该怎压缩呢或者怎么分包2022-05-161
null开发过程中出现加载慢，timeout。2022-02-17
收起评论