Day_07 : 让 Vite 来开启你的Vue 之 Vite 核心 esbuild

Hi Dai Gei Ho~ 我是Winnie~

今天终於来到我的第七天,按照七天养成一个好习惯的说法,我发现自己好像也开始养成了每天会写一点东西的习惯,不管是不是技术文(奇怪~我怎麽开始说结赛感言了XD。

而到了第七天,相信大家 对於 Vite 基本原理 应该都有稍微理解了,如果有实际使用过,可能也开始感受到他是如此的快速了吧~但能让 Vite 如此快速的原因 其实不只 Native ESM, 其中 esbuild 也是 他的功臣之一啊! 所以在今天的内容中,我们将来介绍 Vite 中的 esbuild

什麽是 esbuild ?

esbuild 是一个新型的 JavaScript 打包工具,而他最大特色是 相较於其他打包工具下 他真的好快啊~
不信吗? 让我们来看看以下的比较图

从上图我们可以看到,Webpack5 打包需要 54.5s,而 esbuild 只需 0.37s。

为什麽可以这麽快?

这是因为 esbuild 是使用 Go语言来编写的,而在Go语言的核心是 采取并行性且有内存管理的机制,所以 esbuild 可以充分利用 CPU 来大量使用并行内存机制,另外一个原因是 esbuild 在开发时是采取全部自己撰写程序,无使用到 第三方模组,综合以上原因,所以 速度优化上 可以这麽快!

Vite 为何使用 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)

30-29 之 DDD 战术篇 2 - Aggregate ( 未完成 )

什麽是 Aggregate 呢 ? 还记得我们谈过的 Bounded Context 与 Entit...

Day28 - Next.js 如何优化图片在网页上的体验?

Image optimzation 在 Next.js 10 版以後发布了 <Image /&...

追求JS小姊姊系列 Day26 -- 不是被已读,而是JS回覆你却没看到:`console`

前情提要 说明了不论是工具人或是姐妹,都有存活的范畴,以及背後的原理。 我:累了,仔细回想起来,好像...

OpenStack Neutron 介绍 1

本系列文章同步发布於笔者网站 昨天为读者介绍目前 OpenStack 中算是最核心的元件,Keyst...

DAY09 - [CSS] 页签 与 其他小事

今日文章目录 页签应用情境 事前准备 CSS练习 参考资料 页签应用情境 页签不管是在小尺寸或大萤...