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方案
forever young
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!