基于qiankun微前端及基于monorepo工作流的lerna改造前端项目(一)

乾坤介绍(import-html-entry)

将一个大型应用拆分成若干个更小、更简单,可以独立开发、测试和部署的子应用,然后由一个基座应用根据路由进行应用切换
解决两个大型项目互不干扰的情况,可以独立运行
基于single-spa,在single-spa基础上增加import-html-plugin 和 sangdbox, 解决加载应用和沙箱隔离的问题

应用加载切换 劫持 hashchange和popState

(包括css隔离和js隔离,js隔离利用proxy和快照方式来实现,proxy劫持对象的set和get方法)
import-html-entry 实现应用以html为入口,通过window.fetch 依次 解析加载css,js

sangdbox

多实例沙箱-ProxySandbox:

Proxy对象: setter
例如设置 window.test = true

劫持对window对象的操作
设置子应用的内部状态池
updateValueMap.set(‘test’, true)

Proxy对象: getter
例如获取 window.test

查询updateValueMap,没有值就去window查找

生命周期

merge(自定义的生命周期, 本身定义的生命周期):

本身定义的生命周期:在子应用中获取该环境变量,将其设置为 webpack_public_path 的值,从而使子应用在主应用中运行时,可以匹配正确的资源路径

你可能感兴趣的:(前端框架,前端,javascript,vue.js)