use

<BrowserRouter>
  <Route path="/app" render={() => <MicroApp target="http://localhost:8080" />} />
  <Route path="/app2" render={() => <MicroApp target="http://localhost:8090" />} />
</BrowserRouter>
Copy the code

Yes, it’s just a component.

implementation

function MicroApp({ target }) { const div = useRef(null) useEffect(() => { const container = div.current const OldWindowKeys = object.keys (window) // Fetch (target).then(res => res.text()).then(htmlString => {const HTML = document.createElement(' HTML ') html.innerhtml = htmlString // Insert style const links = Array.from(html.getElementsByTagName('link')) links.forEach(it => { const link = document.createElement('link') link.rel = 'stylesheet' link.href = it. Href container. AppendChild (link)}) // Insert script const scripts = Array.from(html.getElementsByTagName('script')) scripts.forEach(it => { const script = document.createElement('script') Script.defer = true script.src = it.src container.appendChild(script)})}) // Reset the container and window return () => { container.innerHTML = '<div id="root"></div>' const newWindowKeys = Object.keys(window) const appWindowKeys = newWindowKeys.filter(key => ! oldWindowKeys.includes(key)) appWindowKeys.forEach(key => { window[key] = undefined }) } }, []) return ( <div ref={div}> <div id="root"></div> </div> ) }Copy the code

advantages

  • Framework, technology stack independent
  • The child app is placed inside the main app as a clean div and automatically takes advantage of everything the main app has, such as common styles
  • Js sandbox
  • CSS sandbox
  • The access cost of the sub-application is 0, and the sub-application can be written according to the ordinary APP. When the sub-application is nested, the mount point can be agreed

Contrast the tide

  • Qiankun changed all SRC to manual fetch, so that resources are not cached, so that every time you enter the application, the screen will be blank and the experience will be poor. That’s why I wrote it.
  • The embedded code is cleaner.
  • The child application doesn’t need to do anything, no extra code and no packaging configuration
  • Don’t rely on webpack
  • The universe is heavy

Unrealized.

There is no communication mechanism between the master and sub-project. This can be resolved with something like sessionStorge