no bundle

no bundle 是基于浏览器支持 es module 来实现的,浏览器会做 es module 的依赖分析,然后加载对应的模块,这样自然就不用自己做依赖分析了,只需要实现模块的编译即可。

所以,no bundle 工具会启动一个开发服务器,根据请求的模块路径来进行相应的编译,然后返回编译后的代码。

当然,生产环境还是需要打包的,会用打包工具来处理。no bundle 方案只是解决了开发环境下打包工具要构建整个依赖图导致比较慢的痛点问题。

我们回过头来综合看一下:

构建的核心是对不同的文件做不同的编译,最早的任务运行器的方案实现了编译流程的组织,但是并没有做全局的优化,也没有自己的 runtime 代码,所以出现了基于依赖分析的打包工具,打包工具可以基于依赖分析实现 treeshking、code splitting 等优化,可以配合 runtime 代码实现 lazy load。但成也依赖分析,败也依赖分析,这个太慢了,所以出现了 no bundle 的方案,配合浏览器对 es module 的支持,只要实现对应模块的编译服务即可,不过生产环境还是要打包的。

前端工程化是指围绕代码处理的一系列工具链,他们把代码当作字符串处理,并不运行代码,包括编译构建、静态分析、格式化、CI/CD 等等。

非常不错的文章,讲述了前端工程化的要领和范围,简单阐述了工程化的历史推进过程,还有目前最新的no bundle方案

posted @ 2023-05-10 23:21  kitebear  阅读(39)  评论(0编辑  收藏  举报