所在的位置: html >> html前景 >> HTMLEntry源码分析

HTMLEntry源码分析

简介

从HTMLEntry的降生缘由-旨趣简述-本质运用-源码剖析,带你全方位刨析HTMLEntry框架。

序文

HTMLEntry这个词众人大概较量生疏,终究在谷歌上搜HTMLEntry是甚么?都搜罗不到确实的终归。但即使你懂得微前端的话,大概就会有一些懂得。

致读者

本着不挥霍众人工夫的准则,特此讲解,即使你能读懂HTMLEntry是甚么??部份,则可延续往下赏玩,即使看不懂提议赏玩完举荐质料再归来赏玩

JSEntry有甚么题目

说到HTMLEntry就不得不提别的一个词JSEntry,由于HTMLEntry即是来束缚JSEntry所面对的题目的。

微前端范畴最出名的两大框架离别是single-spa和qiankun,后者是基于前者做了二次封装,并束缚了前者的一些题目。

single-spa就做了两件办事:

加载微运用(加载法子还得用户自身来实行)办理微运用的状况(初始化、挂载、卸载)

而JSEntry的观念就在加载微运用的功夫用到了,在操纵single-spa加载微运历时,咱们加载的不是微运用自身,而是微运用导出的JS文献,而在进口文献中会导出一个目标,这个目标上有bootstrap、mount、unmount这三个接入single-spa框架一定供给的性命周期法子,此中mount方准则定了微运用理当怎样挂载到主运用供给的容器节点上,自然你要接入一个微运用,就须要对微运用停止一系列的厘革,但是JSEntry的题目就出在这边,厘革时对微运用的侵略行太强,况且和主运用的耦合性太强。

single-spa采取JSEntry的方法接入微运用。微运用厘革个别分为三步:

微运用路由厘革,增加一个特定的前缀微运用进口厘革,挂载点改变和性命周期函数导出打包用具建设厘正

侵略型强原本说的即是第三点,厘正打包用具的建设,操纵single-spa接入微运用须要将微运用全面打包成一个JS文献,宣布到静态资本效劳器,而后在主运用中建设该JS文献的地方通知single-spa去这个地方加载微运用。

不说此外的,就此刻这个修改就存在很大的题目,将全面微运用打包成一个JS文献,罕见的打包优化根底上都没了,譬如:按需加载、首屏资本加载优化、css自力打包等优化法子。

留意:子运用也能够将包打成多个,而后操纵webpack的webpack-manifest-plugin插件打包出manifest.json文献,生成一份资本清单,而后主运用的loadApp长途读取每个子运用的清单文献,挨次加载文献内部的资本;不过该计划也没举措享福子运用的按需加载才略

项目宣布此后浮现了bug,修理此后须要革新上线,为了扫除抚玩器缓存带来的运用,个别文献名会带上chunkcontent,微运用宣布此后文献名都市产生改变,这功夫还须要革新主运用中微运用建设,而后从头编译主运用而后宣布,这套职掌实在是不能忍耐的,这也是微前端框架之single-spa从初学到通晓这篇文章中示例项目中微运用宣布时的处境建设取舍development的缘由。

qiankun框架为懂得决JSEntry的题目,因而采取了HTMLEntry的方法,让用户接入微运用就像操纵iframe同样浅显。

即使以上实质没有看懂,则讲解这篇文章不太合适你赏玩,提议赏玩微前端框架之single-spa从初学到通晓,这篇文章详细叙述了single-spa的根本操纵和源码旨趣,赏玩完此后再归来读这篇文章会有事倍功半的成绩,请读者切勿强行赏玩,不然大概浮现头昏眼花的表象。

HTMLEntry

HTMLEntry是由import-html-entry库实行的,经过


转载请注明:http://www.aierlanlan.com/cyrz/1026.html