每日优鲜供应链前端团队微前端改造
https://juejin.im/post/5d7f702ce51d4561f777e258
https://www.jianshu.com/p/c0f4b837dbea
https://www.jianshu.com/p/54904acb5896
ice-stark为前端 https://www.zhihu.com/column/ice-design
手写微前端 http://www.zhufengpeixun.com/jg-vue/vue-analyse/mic-front1.html#_2-proxy-%E4%BB%A3%E7%90%86%E6%B2%99%E7%AE%B1
https://www.jdon.com/54691
https://tech.antfin.com/community/articles/536
https://segmentfault.com/a/1190000039363998
https://www.cnblogs.com/everfind/p/microfrontend.html
微前端架构
https://www.i4k.xyz/article/weixin_44824381/105515508

nodejsAPI限流
https://github.com/xizhibei/blog/issues/29
web站点性能优化
https://github.com/xiaosansiji/cookbook-of-webdev/blob/master/performance-optimization/index.md

微前端：把一个模块拆分成一个应用

  • 公共依赖：CDN
  • webpack/externals

微前端架构

路由劫持和应用加载

  1. 主应用：上图中的base模块，一般是所有子应用模块所共用的公共部分。
  2. 子应用：众多展示在主应用内容区的应用。
  3. 包装器：将现有的应用包装供给加载器使用。
  4. 加载器：整个架构的核心部分，它的作用是用来调度子应用，决定何时展示哪个子应用
    1. 动态设置子应用 publicPath

image.png
父应用加载子应用协议

  1. bootstrap
  2. mount
  3. unmount
  4. update

spa单页应用系统架构
image.png

js沙箱

  1. proxy代理沙箱 http://www.zhufengpeixun.com/jg-vue/vue-analyse/mic-front1.html#_2-proxy-%E4%BB%A3%E7%90%86%E6%B2%99%E7%AE%B1
  2. 快照沙箱

qiankun

基于 singleSpa封装
qiankun-spa https://github.com/umijs/qiankun/blob/master/examples/main/index.js
image.png

singleSPA

英文文档 https://single-spa.js.org/
社区知名度更高，生态以及能力上会完善一些
架构设计上：

  1. icestark 更加简单
  2. single-spa 要重一些，比如需要 single-spa-react/vue/preact 这种设计

single-spa是一个用于前端微服务化的JavaScript前端解决方案，
允许多个应用程序在一个页面应用程序中共存
本质上是一个javascript库
现在流行的单页应用系统就是一个spa页面

image.png

singleSPA缺点

  1. 不够灵活，不能动态加载js文件，需要自己动态加载 script标签
  2. 样式没有隔离，会影响到全局的样式
    1. 样式会污染全局样式，影响父应用
  3. 没有 js沙箱机制，qiankun基于 single spa的二次封装

在父应用下，加载子应用报错，解决：设置 publicPath
vue-router.esm.js?8c4f:2257 ChunkLoadError: Loading chunk about failed.
(missing: http://localhost:8080/js/about.js)
子应用的 main.js

  1. // 如果是父应用引用子应用
  2. if (window.singleSpaNavigate) {
  3.   __webpack_public_path__ = 'http://localhost:7000'
  4. }

icestark

https://ice.work/docs/icestark/about
https://zhuanlan.zhihu.com/p/88449415
微前端方案 icestark 的子应用模板，用于快速初始化微应用

image.png

  1. npm init ice project-name
  3. cd project-name
  4. npm install
  5. npm run start // localhost:3333
  7. https://ice.alibaba-inc.com/ # ice文档

分层架构

分层.png

如何捕获到系统中所有路由的变化？

icestark 通过劫持 history.pushState 和 history.replaceState 两个 API，
同时监听 popstate 事件，保证能够捕获到到所有路由变化。
当捕获到路由变化时，根据路由查找对应的子应用，
如果对应的还是当前这个子应用则什么事情都不做
如果对应的是新的一个子应用则卸载之前的子应用，同时加载新的子应用并渲染之

微前端的方向

  1. 探索沙箱机制，让二方业务更加安全的运行，同时让不可控的三方业务接入逐渐成为可能；
  2. 针对微前端的业务场景逐步完善生态，比如一些鉴权之类的业务需求