esbuild 比 webpack 编译速度快了 100 倍

我们先看一张图:

esbuild 比 webpack 编译速度快了 100 倍_第1张图片

上图的结果是复制了 10 份 three.js 进行打包,期间没有利用任何缓存。可以看到结果比 webpack4 快了将近 100 倍。这速度真的太惊人了。它可以替代 TypeScript 官方编译器,来提高 TypeScript 的打包速度。

它之所以这么快,一个原因是使用了 go 语言,go 一直以他的性能优势称霸,可充分利用并发,提高编译速度。其实万变不离其宗,所有的工具,最终的知识点都指向了编译原理,作为前端人不能因为各种工具层出不穷,高喊「我学不动了」。

它有下面这些功能:

快速的编译速度,无需缓存;

支持 ES6 和 CommonJS 模块规范;

支持 ES6 的 Tree shaking;

同时支持 JavaScript 和 Go;

支持 TypeScript 和 JSX 语法;

支持 source maps;

支持代码压缩;

支持插件;

编译流程

esbuild 比 webpack 编译速度快了 100 倍_第2张图片

代码分割

esbuild 比 webpack 编译速度快了 100 倍_第3张图片

esbuild 比 webpack 编译速度快了 100 倍_第4张图片

tree-shaking

esbuild 比 webpack 编译速度快了 100 倍_第5张图片

最后

本文只是给大家普及一下这个编译工具能够大大提高编译速度,至于其中实现细节并没有深究。感兴趣的朋友可以研究下。Vite 这个工具目前已经使用 EsBuild。至于它会不会替代 webpack,我们拭目以待,天下苦 webpack 久已。先挖个坑,后面会写一遍关于它的深入分析的文章。如果你有用过 EsBuild,不妨留言区留下你的想法,感谢大家, 大家加油。

图来源于:https://github.com/evanw/esbuild

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网:https://lefex.gitee.io/

你可能感兴趣的:(vue,javascript,java,js,编程语言)