icestark
icestark copied to clipboard
ice-lab
scriptAttributes 函数配置 nomodule 属性导致子应用不能正常挂载
主应用和子应用都是 Vue 项目
使用 scriptAttributes是为了解决 icestark 动态加载script时把legacy 文件也同样加载的错误问题。
所以通过scriptAttributes加上了nomodule属性，可以让浏览器不加载这类文件。
应用启动后，无任何执行错误
怀疑内部是在等待资源ready后才会执行mount，但其实nomodule模块是不会加载的，最后导致无限等待
主应用配置
const app = {
name: "microAppA",
basename: '/vip/'
activePath: '/vip/',
title: 'A',
entry: 'http://127.0.0.1:8000/',
sandbox: true,
container: document.getElementById('app'),
loadScriptMode: 'script',
// 加上这段代码导致子应用无法正常挂载，去掉则正常
scriptAttributes: (url) => url.includes('legacy') ? ["nomodule=nomodule"] : [],
}
子应用 使用 umd 打包 入口配置 index.html
<html>
<head>
<script defer type="module" src="http://127.0.0.1:8000/js/chunk-vendors.js"></script>
<script defer type="module" src="http://127.0.0.1:8000/js/index.js"></script>
<!-- polyfill -->
<script defer nomodule src="http://127.0.0.1:8000/js/chunk-vendors-legacy.js"></script>
<script defer nomodule src="http://127.0.0.1:8000/js/index-legacy.js"></script>
</head>
<body>...</body>
</html>
如果想解决scriptAttributes 配置nomodule出现无法挂载的问题，还是希望icestark能暴露一个资源加载的钩子，如onAssetsLoad，让外部能进行很好过滤，否则这种场景在子应用下就是无解。
最后如果要改动到子应用的构建配置，让它不生成 legacy文件，这个也不太合理。
代码没有对这种特殊情况处理 考虑对有 nomodule 属性的script 直接resolve？
https://github.com/ice-lab/icestark/blob/a6981bd305f21a6cd6b8ad4897b870710a8d63a2/packages/icestark/src/util/handleAssets.ts#L252-L279
@fychinesepjj 开启 sandbox 的情况下，不会以 script 的方式加载微应用
@maoxiaoke 测试过和 sandbox的值没有太大关系，不管是 true 还是 false 问题依旧。
scriptAttributes: (url) => url.includes('legacy') ? ["nomodule=nomodule"] : [],
这个问题的出现是我在添加了上述scriptAttributes 配置选项后，子应用打包的 legacy 模块在被插入到当前主应用的 dom 节点后添加上了 nomodule 属性，而 nomodule 属性在正常浏览器中并不会触发 onload 事件，script 加载没有 resolve 一直是pending 状态 ，最后显示的效果就是子应用没有正常挂载，同时也没有任何错误。
其实我的想法很简单，就是希望对子应用打包产生的 legacy 文件进行过滤。 要不同时加载到主应用，会出现报错问题。