At present, the more mature micro-front solutions include wujie, qiankun, micro-app, and EMP solutions. The following micro-front solutions are analyzed separately:
qiankun program
The qiankun solution is a micro-frontend solution based on single-spa.
features
The introduction of sub-applications in the form of html entry greatly reduces the cost of application transformation compared with js entry; for a
complete sandbox solution, the js sandbox has three sets of progressive enhancement solutions: SnapshotSandbox, LegacySandbox, and ProxySandbox, and the css sandbox has implemented strictStyleIsolation , experimentalStyleIsolation two sets of solutions applicable to different scenarios;
the ability to preload static resources;
insufficient
The cost of adaptation is relatively high, and a series of adaptation work needs to be done in engineering, life cycle, static resource path, routing, etc.;
css sandbox adopts strict isolation and there will be various problems, and js sandbox performs performance in some scenarios The decline is serious;
multiple sub-applications cannot be activated at the same time, and sub-applications are not supported;
esmodule scripts such as vite cannot be supported;
micro-app solution
micro-app is a micro-frontend solution based on webcomponent + qiankun sandbox.
features
Using webcomponet to load sub-applications is more elegant than single-spa, a registration monitoring solution;
reusing qiankun's sandbox mechanism that has been verified by a large number of projects also makes the framework more reliable;
component-based APIs are more in line with usage habits and support sub-applications to keep alive ;
Reduce the cost of sub-application transformation and provide static resource preloading capabilities;
insufficient
The access cost is lower than that of qiankun, but there is still a dependency on routing;
after multiple applications are activated, the routing status of each sub-application cannot be maintained, and they are all lost after refreshing; the
css sandbox still cannot be absolutely isolated, and the js sandbox is a global variable lookup cache , the performance has been optimized;
it supports vite operation, but the sub-application must be transformed with plugin, and the js code cannot be sandboxed; there is no downgrade
for browsers that do not support webcompnent;
EMP program
The EMP solution is a micro-frontend solution based on webpack 5 module federation.
features
Webpack federated compilation can ensure decoupling of all sub-application dependencies;
decentralized calls and shared modules between applications;
remote ts support for modules;
insufficient
Strong dependence on webpack, old projects are not friendly;
there is no effective css sandbox and js sandbox, it needs to rely on user self-awareness;
sub-application keeping alive and multi-application activation cannot be realized;
the routing of the main and sub-applications may conflict;
Unbounded scheme
The unbounded micro front-end solution is based on webcomponent container + iframe sandbox, which can perfectly solve adaptation cost, style isolation, running performance, page white screen, sub-application communication, sub-application keep-alive, multi-application activation, vite framework support, application sharing, etc. The core demands of users.
Document address , demo address: https://wujie-micro.github.io/demo-main-vue/home , git address: https://github.com/Tencent/wujie
The cost, speed, isolation, function and other aspects are described below.
low cost
The cost of the unbounded micro-frontend is very low, which is mainly reflected in the use cost of the main application and the adaptation cost of the sub-application.
Main application usage cost
The main application does not need to learn additional knowledge when using Wujie. Wujie provides wujie-vue based on vue package and wujie-react based on react package. Users can load sub-applications like ordinary components. Take wujie-vue as an example:
<WujieVue width="100%" height="100%" name="xxx" url="xxx" :sync="true" :fiber="true" :degrade="false" :fetch="fetch" :props="props" :plugins="plugins" :beforeLoad="beforeLoad" :beforeMount="beforeMount" :afterMount="afterMount" :beforeUnmount="beforeUnmount" :afterUnmount="afterUnmount" ></WujieVue>
Sub-application loading is no different from ordinary vue component loading, and all configurations converge to the properties of the component.
Sub-application adaptation cost
Sub-applications first need to be modified to support cross-domain requests. This is the prerequisite for the operation of all micro-frontend frameworks. In addition, sub-applications can run in the unbounded framework without any modification, but the mode of operation at this time is reconstruction mode.
In Unbounded, sub-applications will enter different operating modes according to whether they are kept alive or not, and whether they have performed life cycle adaptation:
Among them, the keep-alive mode, singleton mode, and reconstruction mode are applicable to different business scenarios. Even the complex singleton mode users only need to do a little simple life cycle transformation. It can be said that the sub-application adaptation cost is extremely low.
high speed
The unbounded micro-frontend is very fast, mainly reflected in the two aspects of fast opening of the first screen and fast running speed.
The first screen opens quickly
At present, most micro-frontends can only preload static resources, but even if all the resources of the sub-application are pre-loaded, the page will still have a long white screen time when the sub-application is opened. This part of the white screen time is mainly due to the sub-application js analysis and execution.
The unbounded micro-frontend can not only preload static resources, but also pre-execute sub-applications.
Pre-execution will block the execution thread of the main application, so Unbounded provides a fiber execution mode, and adopts a method similar to react fiber to execute js intermittently. The execution of each js file is wrapped in requestidlecallback, and each js execution can return a response to external input. But this granularity is the js file. If the single js file of the sub-application is too large, the size can be reduced by unpacking to maximize the benefits of fiber execution mode.
run fast
The js of the sub-application runs in the iframe. Since the iframe is a natural js running sandbox, there is no need to use the with (fakewindow) method to specify the execution context of the sub-application, so as to avoid the use of the with statement to execute the sub-application code. The performance drops, and the overall operating performance is not much different from the native performance.
Native isolation
The unbounded micro-frontend realizes the native isolation of css sandbox and js sandbox, and sub-applications don't have to worry about pollution.
css sandbox isolation
Unbounded places the dom of sub-applications in the container of webcomponent + shadowdom, and realizes the native isolation of css between applications except for the inheritable css properties.
js sandbox isolation
Unbounded puts the js of the sub-application in an iframe (js-iframe) to run, realizing the complete decoupling and isolation of window, document, location, and history between applications.
js sandbox and css sandbox connection
Unbounded uses the method of proxy + Object.defineproperty at the bottom layer to proxy the hijacking of dom operations in js-iframe to the webcomponent shadowRoot container, and developers have no perception and no need to care.
Powerful
Unbounded micro-frontend has very powerful functions, supporting sub-application keepalive, sub-application embedding, multi-application activation, decentralized communication, life cycle, plug-in system, vite framework support, IE9 compatibility, and application sharing.
Child application maintenance
When the sub-application is set to the keep-alive mode, the status and routing of the sub-application can still be maintained after switching the sub-application.
Nesting of sub-applications
Unbounded supports multi-layer nesting of sub-applications. The nested application is consistent with the normal application, and supports preloading, keep-alive, synchronization, communication and other capabilities. It should be noted that the name of the embedded sub-application also needs to be unique, otherwise it will be duplicated. Use the previously rendered application
Multiple application activation
Unbounded supports the ability to activate multiple sub-applications on one page at the same time and keep the routes of these sub-applications synchronized.
decentralized communication
Unbounded provides a variety of communication methods: window.parent direct communication, props data injection, decentralized EventBus communication mechanism:
-
The sub-application js runs in an iframe with the same domain as the main application, so window.parent can directly get the window object of the main application for communication
-
The main application can inject props objects into sub-applications, which can inject data and methods for sub-applications to call
-
The built-in EventBus decentralized communication solution allows convenient direct communication between applications
life cycle
Unbounded provides a complete life cycle hook for the main application to call:
-
beforeLoad: Triggered before the child application starts loading static resources
-
beforeMount: Triggered before sub-app rendering (only for life cycle modification)
-
afterMount: Triggered after the sub-application is rendered (only for life cycle modification)
-
beforeUnmount: Triggered before the sub-app is unmounted (only for life cycle modification)
-
afterUnmount: Triggered after the sub-app is unmounted (only for life cycle modification)
-
activated: Triggered after the sub-application enters (only for keep-alive mode)
-
deactivated: Triggered after the sub-app leaves (only for keep-alive mode)
plug-in system
Unbounded provides a powerful plug-in system, which is convenient for users to modify the sub-application code at runtime so as to avoid hard-coding the adaptation code into the warehouse.
The main capabilities of the unbounded plug-in are as follows:
-
html-loader can process sub-application templates
-
js-excludes and css-excludes can exclude sub-application specific js and css loading
-
js-before-loaders, js-loader, js-after-loaders can easily customize the sub-application js
-
css-before-loaders, css-loader, css-after-loaders can easily customize the css of sub-applications
vite framework support
The unbounded sub-app runs in the iframe and natively supports esm scripts, and there is no need to worry about the context of the sub-app running, because the sub-app reads the window context of the iframe, so the unbounded micro-frontend natively supports the vite framework.
Compatible with IE9
Since Unbounded adopts the solution of webcomponent + shadowdom + proxy, Unbounded micro-frontend will automatically downgrade when it cannot run on some low-version browsers.
The downgrade scheme uses:
-
webcomponent + shadowdom ⇒ iframe（dom-iframe）
-
proxy + Object.defineproperty ⇒ Object.defineproperty
-
The way the sub-app runs is dom-iframe + js-iframe + Object.defineproperty, which is compatible with IE9+ (unbounded does not have polyfill es6, and needs to be manually processed by babel).
Unbounded can still guarantee the native isolation of css and js of the sub-application after automatic downgrade, but due to the limitation of dom-iframe, the pop-up window will only be opened inside the sub-application
app sharing
A micro-frontend system may run multiple sub-applications at the same time, and there may be the same package dependency between different sub-applications, then this dependency will be repeatedly packaged and executed in different sub-applications, resulting in waste of performance and memory.
Unbounded provides an engineering strategy combined with unbounded plug-in capabilities, which can effectively solve this problem (other micro-frontend frameworks can also do it). Here is an example of a scenario: the main application uses ant-design-vue, and sub-application A The same version of ant-design-vue is also used.
Main application:
1. Modify the index.js of the main application, and mount the shared package to the window object of the main application
// index.js import Antdv from "ant-design-vue"; // 将需要共享的包挂载到主应用全局 window.Antdv = Antdv;
2. Inject the plug-in when loading the sub-application, and assign the Antdv of the main application to the window object of the sub-application
<WujieVue name="A" url="xxxxx" :plugins="[{ jsBeforeLoaders: [{ content: 'window.Antdv = window.parent.Antdv' }] }]"> </WujieVue>
Sub-app: webpack settings externals
module.exports = { externals: { "ant-design-vue": { root: "Antdv", commonjs: "Antdv", commonjs2: "Antdv", amd: "Antdv", }, }, };
If the sub-application needs to be run separately, you can refer to the documentation
Summarize
The unbounded micro-frontend uses webcomponent + iframe to load sub-applications, which has a series of advantages such as low cost, fast speed, native isolation, and powerful functions. While meeting the core demands of users, the experience of using micro-frontends is as simple as using ordinary components , greatly lowering the threshold for use.