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的脚手架把，拭目以待。