parcel打包器原理

parcel是什么我就不介绍了,感兴趣的可以去了解一下, https://github.com/parcel-bundler/parcel
然后我就直接从运行 parcel xx.html 后说吧:
1、从xx.html入口文件开始构造assets树,这个过程就是将从入口点开始一直统计所有的依赖文件,并且对每个依赖文件做针对性处理,包括处理受保护的文件,或者是默认支持的assets里没有的文件,然后填入这些文件的基本信息,如路径,名字,文件内容,依赖等

找依赖的具体过程:以xx.html作为第一个assets对象,对它进行解析,找出内容中可能存在的依赖,如果这里是html文件,那么将它的所有node节点进行遍历,找出有link,script的标签然后加入url依赖,递归执行,并生成缓存文件,如果下一次再需要找依赖的时候,直接读缓存里的信息。

2、基于上面构造好的assets树来构造bundle树,这个过程会处理一些动态import的文件等,并生成child bundles 和 siblings bundles。

注:这里的动态import文件是指:需要在父级文件里加入由hash值构成的动态链接,比如html里加入了一个script src="xx.js",那么这个xx.js就会在html bundle 的child bundles队列里;
而如果是这个xx.js里import 了一个css文件,那么这个css文件会存在于xx.js的siblings bundles队列中,这个也会需要有一个动态的hash链接;
再一个就是如果xx.js里引入了一个xx2.js,那么这个xx2.js不会存在于任何xx.js 的bundles队列中,xx2.js会作为一个小模块,跟随xx.js同时写入作为一个大模块,这个大模块在加载的时候,会尝试加载所有小模块。【下图是parcel xx.html后生成的dist/[hash值].js片段】
image.png

image.png

最后就是package过程,这个过程就是把bundle tree里所有的bundle写到最终的js文件中。

总结:
今天跑了一天的parcel源码,以上是自己的一点收获,希望能对一些对parcel打包过程感兴趣的人提供点帮助。如果解释有误,欢迎提出。

另外想说的是:
parcel跑起来确实快,毕竟是多线程处理,然而现在官方还只有一些简单的例子,希望以后能出vue,react,angular的脚手架把,拭目以待。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、温故而知新 1. 内存不够怎么办 内存简单分配策略的问题地址空间不隔离内存使用效率低程序运行的地址不确定 关于...
    SeanCST阅读 8,064评论 0 27
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,309评论 19 139
  • 2016-2017年是插件化遍地开花的一年,各家大厂都开源了自己的插件化框架、热修复技术,网上也已经有许多介绍和分...
    Geek帆哥阅读 2,989评论 2 9
  • 下午忙的差不多了,因而吃完饭后回到办公室我觉得我需要放松一下。所以决定看看轻松愉快的综艺节目,选来选去决定看《爸爸...
    jxr简阅读 412评论 0 0
  • 忘记画西瓜籽了 中间最甜的那部份画小了 今天终于出太阳,在楼下走了三圈,大概3000步,身上热呼呼的。 朋友说,在...
    左手边的柠檬糖阅读 237评论 3 2

友情链接更多精彩内容