Why not use iframe? This is almost the first question that will be challenged by all micro-frontend solutions. However, most of the micro front-end solutions have given up the iframe solution. Naturally, there is a reason, not for "showing off skills" or deliberately pursuing "maverick".
If experience issues are not considered, iframe is almost the perfect micro-frontend solution.
The biggest feature of iframe is that it provides a browser-native hard isolation solution, which can perfectly solve problems such as style isolation and js isolation. But his biggest problem is that his isolation cannot be broken through, resulting in the inability to share the context between applications, which brings about problems in development experience and product experience.
- urls are out of sync. The browser refreshes the iframe url state and loses it, and the back and forward buttons cannot be used.
solve:
Parent-to-son: the parent calls postMessage, the child calls addEventListener, and the child-to-father is the opposite
- The UI is not synchronized and the DOM structure is not shared. Imagine a bullet box with a mask layer in the iframe in the lower right corner of the screen. At the same time, we require the browser to center the bullet box and automatically center it when the browser resizes..
- The global context is completely isolated and memory variables are not shared. For the communication and data synchronization requirements of the internal and external systems of the iframe, the cookie of the main application must be transparently transmitted to the sub-applications with different root domain names to achieve the effect of avoiding login.
- slow. Each sub-application entry is a process of browser context reconstruction and resource reloading.
Some of these problems are easier to solve (Question 1), some problems we can turn a blind eye to (Question 4), but some problems are difficult for us to solve (Question 3) or even impossible (Question 2) , and these unsolvable problems will bring very serious experience problems to the product, which eventually led us to abandon the iframe solution.