Hi Dai Gei Ho~ 我是Winnie~
今天终於来到我的第七天,按照七天养成一个好习惯的说法,我发现自己好像也开始养成了每天会写一点东西的习惯,不管是不是技术文(奇怪~我怎麽开始说结赛感言了XD。
而到了第七天,相信大家 对於 Vite 基本原理 应该都有稍微理解了,如果有实际使用过,可能也开始感受到他是如此的快速了吧~但能让 Vite 如此快速的原因 其实不只 Native ESM, 其中 esbuild 也是 他的功臣之一啊! 所以在今天的内容中,我们将来介绍 Vite 中的 esbuild
esbuild 是一个新型的 JavaScript 打包工具,而他最大特色是 相较於其他打包工具下 他真的好快啊~
不信吗? 让我们来看看以下的比较图
从上图我们可以看到,Webpack5 打包需要 54.5s,而 esbuild 只需 0.37s。
为什麽可以这麽快?
这是因为 esbuild 是使用 Go语言来编写的,而在Go语言的核心是 采取并行性且有内存管理的机制,所以 esbuild 可以充分利用 CPU 来大量使用并行及内存机制,另外一个原因是 esbuild 在开发时是采取全部自己撰写程序,无使用到 第三方模组,综合以上原因,所以 速度优化上 可以这麽快!
事情是这样的,如果今天 Vite 只有使用 Native ESM,在许多的模组引用中 其实是无法使用的,因为多数模组 其实都还是采用 CommonJS 规范来开发,所以浏览器还是看不懂啊~另外,不知道大家记不记得昨天提到的联结车 的例子,当 模组 连结到另一个 模组,而另一个模组又连结 另一个模组 时 就会产生一大串,而浏览器就会有过多请求 (如下图)
所以为解决这问题,Vite 会在 Dev-server启动前 使用依赖预编译(Dependency Pre-Bundling),
而这个依赖预编译(Dependency Pre-Bundling)就是透过 esbuild 来执行的,其会预先针对 所有模组进行转译与打包,当浏览器再次请求某个模组时,就只针对被更改的模组进行编译,这样就能避免多次请求的问题了。
既然这麽快,为什麽 不使用 esbuild打包?
针对这个疑问,Vite在官方文件中也针对其做了解释,
大概意思是,虽然esbuild 健步如飞,但因为针对一些重要功能都还在持续开发中(如 程序码分割 与css处理),所以就目前来说,会先采取 Rollup打包应用方面,较为成熟和灵活。
但尽管如此,Vite 也没有把话说死,提到 如未来 esbuild 功能较为成熟稳定後,也不排除会将他们作为 production 环境下的打包工具 。
以上 就是针对 Vite 核心 esbuild的说明,谢谢大家的阅读,如有错误再请大家给予指教 感恩的心~
图片来源:https://zhuanlan.zhihu.com/p/352403391
https://esbuild.github.io/
<<: 【Day 04】LeetCode:Fizz Buzz ( 用 JavaScript 学演算法 )
>>: 使用 Template Message 替 Line Bot 加上同意条款的功能(2)
什麽是 Aggregate 呢 ? 还记得我们谈过的 Bounded Context 与 Entit...
Image optimzation 在 Next.js 10 版以後发布了 <Image /&...
前情提要 说明了不论是工具人或是姐妹,都有存活的范畴,以及背後的原理。 我:累了,仔细回想起来,好像...
本系列文章同步发布於笔者网站 昨天为读者介绍目前 OpenStack 中算是最核心的元件,Keyst...
今日文章目录 页签应用情境 事前准备 CSS练习 参考资料 页签应用情境 页签不管是在小尺寸或大萤...