2023年8月1日发(作者：)
【微前端】qiankun到底是个什么⿁前⾔在上⼀篇⽂章【微前端】single-spa 到底是个什么⿁ 聊到了 single-spa 这个框架仅仅实现了⼦应⽤的⽣命周期的调度以及 url 变化的监听。微前端的⼀个特点都没有实现，严格来说算不上微前端框架。今天就来聊⼀个真正的微前端框架：qiankun。同样地，本⽂不会教⼤家怎么实现⼀个 Demo，因为官⽅的 Github 已经有⼀个很好的 Demo了，如果你觉得官⽹的 Demo 太复杂了，也可以看我⾃⼰实现的⼩ Demo。qiankun 到底做了什么⾸先，qiankun 并不是单⼀个框架，它在 single-spa 基础上添加更多的功能。以下是 qiankun 提供的特性：实现了⼦应⽤的加载，在原有 single-spa 的 JS Entry 基础上再提供了 HTML Entry样式和 JS 隔离更多的⽣命周期：beforeMount, afterMount, beforeUnmount, afterUnmount⼦应⽤预加载全局状态管理全局错误处理接下来不会⼀个特性⼀个特性地讲，因为这样会很⽆聊，讲完你也只能知道这是个啥，不能深⼊了解是怎么来的。所以我更愿意聊⼀下这些特性是怎么来的，它们是怎么被想到的。多⼊⼝先复习⼀下 single-spa 是怎么注册⼦应⽤的：erApplication( 'appName', () => ('appName'), location => With('appName'),);可以看到 single-spa 采⽤ JS Entry 的⽅式接⼊微应⽤，也即：输出⼀个 JS，然后 bootstrap, mount, unmount 函数。但是事件并没有这么简单：我们项⽬⼀般都会将静态资源放到 CDN 上来加速。为了不受缓存的影响，我们还会将 JS ⽂件命名成 contenthash的乱码⽂件名：
。这样⼀来，每次⼦应⽤⼀发布，⼊⼝ JS ⽂件名肯定⼜要改了，导致主应⽤引⼊的 JS url ⼜得改了。⿇烦！打包成单个 JS ⽂件的另⼀个问题就是打包的优化都没了：按需加载、⾸屏资源加载优化、css 独⽴打包等优化措施全
2023年8月1日发(作者：)
【微前端】qiankun到底是个什么⿁前⾔在上⼀篇⽂章【微前端】single-spa 到底是个什么⿁ 聊到了 single-spa 这个框架仅仅实现了⼦应⽤的⽣命周期的调度以及 url 变化的监听。微前端的⼀个特点都没有实现，严格来说算不上微前端框架。今天就来聊⼀个真正的微前端框架：qiankun。同样地，本⽂不会教⼤家怎么实现⼀个 Demo，因为官⽅的 Github 已经有⼀个很好的 Demo了，如果你觉得官⽹的 Demo 太复杂了，也可以看我⾃⼰实现的⼩ Demo。qiankun 到底做了什么⾸先，qiankun 并不是单⼀个框架，它在 single-spa 基础上添加更多的功能。以下是 qiankun 提供的特性：实现了⼦应⽤的加载，在原有 single-spa 的 JS Entry 基础上再提供了 HTML Entry样式和 JS 隔离更多的⽣命周期：beforeMount, afterMount, beforeUnmount, afterUnmount⼦应⽤预加载全局状态管理全局错误处理接下来不会⼀个特性⼀个特性地讲，因为这样会很⽆聊，讲完你也只能知道这是个啥，不能深⼊了解是怎么来的。所以我更愿意聊⼀下这些特性是怎么来的，它们是怎么被想到的。多⼊⼝先复习⼀下 single-spa 是怎么注册⼦应⽤的：erApplication( 'appName', () => ('appName'), location => With('appName'),);可以看到 single-spa 采⽤ JS Entry 的⽅式接⼊微应⽤，也即：输出⼀个 JS，然后 bootstrap, mount, unmount 函数。但是事件并没有这么简单：我们项⽬⼀般都会将静态资源放到 CDN 上来加速。为了不受缓存的影响，我们还会将 JS ⽂件命名成 contenthash的乱码⽂件名：
。这样⼀来，每次⼦应⽤⼀发布，⼊⼝ JS ⽂件名肯定⼜要改了，导致主应⽤引⼊的 JS url ⼜得改了。⿇烦！打包成单个 JS ⽂件的另⼀个问题就是打包的优化都没了：按需加载、⾸屏资源加载优化、css 独⽴打包等优化措施全
发布评论