Open vaakian opened 2 years ago
英文解释
To bundle a file means to inline any imported dependencies into the file itself.
翻译过来就是
bundle
一个文件,意味着将这个文件的所有依赖(dependencies)都打包到文件自身里面去。
也就是说,一个文件import
了一个依赖包
,那么bundle
做的事情就是将依赖包
一并打包进编译后的输出文件里。
当然如果依赖包
又依赖了其它依赖包,那么将会递归进行以上bundle
过程。
如果非bundle
模式,那么import
语句照旧保留,依赖需要另外手动导入,仅仅做一些bundle
之外的工作。如将jsx
语法转换为js
语法创建dom。
esbuild
将文件依赖打包成一个bundle,可以在
浏览器
或者node.js
中独立运行。与webpack功能无异,但因为各种loader是用go语言编写,速度极快,几乎是js版本loader速度的10~100x倍。例子
loader:
dataurl
可以将导入图片的语句,转换成类似data:image/png;base64,iVBORw0KGgo=
类型,可以供dom直接使用。file: app.jsx
编译时指定loader
esbuild app.jsx --bundle --loader:.png=dataurl
官网 ESBuild
虽然esbuild非常快,但目前还不够成熟,不适用于实际项目。但可以预见的是它确实解决了前端开发的痛点。Vite.js目前就是通过esbuild预构建依赖(也就是import的第三方包如react\react-dom\react-router),然后进行强缓存,和进行Typescript的转译。而在最终生产(build)环境时,为了保证稳定性,Vite目前还是通过rollup来打包,因为rollup足够成熟。相信在未来,
esbuild
+Vite.js
的强强联合,必将在前端开发占据一席之地。