processTpl,处理上一步得到的html模版
移除html中初始内容 <!-- -->
匹配 link 标签 <link rel = "stylesheet | prefetch | preload" href = "xxx" />
匹配 <link rel = "stylesheet" href = "xxx" />,外链的样式文件
解析出标签中href属性值,即css文件的地址
如果标签内有 ignore 属性,将该 link 标签替换为一段注释并直接 return,<!-- ignore asset ${href} replaced by import-html-entry -->
将 css 的绝对地址存入 styles 数组中
将 link 标签替换为一段注释, <!-- prefetch/preload link ${linkHref} replaced by import-html-entry -->
匹配 <link rel = "prefetch | preload" href = "xxx" as = "不是font(字体)" />,预加载或者预取的非字体文件,一般是js文件
将该 link 标签替换为一段注释, <!-- prefetch/preload link ${linkHref} replaced by import-html-entry -->
匹配 style 标签,如果标签内 ignore 属性,则将其替换为一段注释, <!-- ignore asset style file replaced by import-html-entry -->
匹配 script 标签
校验 script 标签的 type 属性值是否有效
text/javascript
module
application/javascript
text/ecmascript
application/ecmascript
匹配 <script type = "非 text/ng-template" src = "xxx" />
匹配 <script type = "xx" src = "xx" entry />,如果存在 entry 属性,则将脚本的绝对地址给 entry 变量,作为微应用的入口地址
匹配到 <script ... ignore />,则替换该标签为:<!-- ignore asset ${url} replaced by import-html-entry -->
模块属性匹配成功,则也替换为响应的注释
如果存在 src 属性,则将脚本地址存在 scripts 数组,如果是异步加载 则存一个对象 { async: true, src: xxx } 到 scripts 数组,然后将标签替换为一个注释:<!-- ${async ? 'async' : ''} script ${scriptSrc} replaced by import-html-entry -->
如果上面的匹配没成功则
存在 ignore 属性,则处理
存在 module 则处理
如果是行内脚本 <script>code content</script>,则获取脚本内容
将有效的内容(非纯注释块)存如 scripts 数组,然后将标签替换为注释:<!-- inline scripts replaced by import-html-entry -->
从 scripts 中去除无效的(空的)script
return { template, scripts, styls, entry: entry || scripts[scripts.length - 1] }
getEmbedHTML,将 template 模版中的外链 css 文件变成行内的 style 标签形式,减少 HTTP 请求优化性能
getExternalStyleSheets,通过 fetch 请求特定地址的 css 内容
将 template 模版中 <!-- prefetch/preload link ${linkHref} replaced by import-html-entry --> 替换为 <style>/* ${styleSrc } */ css 内容 </style>