I have previously shared with you the knowledge related to the micro front end (specific can be seen in previous articles:Take a walk and talk about the front end. – See the front end), this time to share some business practices in Qiankun and answer the questions

background

Business Crm development for many years, with the development of boulder applications. Slow packaging, difficult upgrade, troubleshooting long links, poor performance, and poor user experience. In addition, the product’s unreasonable positioning of the system, perennial accumulation of functions, system chaos. A revamp of the system is imminent.

The solution

By using the Qiankun micro-front-end framework to split commercial Crm, functions were continuously removed from the main application and deployed on sub-applications. Crm was used as the main application (system base) and sub-applications were loaded. Code specifications and technology stack upgrades are completed during the migration of functionality to sub-applications.

results

Part of the page has been successfully split, multi-system operation, user awareness technology upgrade, replacement of the original page, packaging and loading speed has been improved. The most important thing is that normal business development is not delayed.

The technical details

Introducing the Qiankun framework and using the original Qiankun package for the main site, the document is as follows:

Qiankun.umijs.org/zh.

The sub-application uses UMI framework and UMI provides qiankun plug-in. Compared with the original Qiankun, it is easier to use and can be used together with the original. The document shows:

Umijs.org/zh-CN/plugi…

The Qiankun has two ways of loading sub-apps

1. Pre-register and write the sub-applications to be loaded in advance, including injection containers, routing matching rules, and sub-application entry

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start();
Copy the code

2. The second method is loadMicroApp, which dynamically loads subapplications. The advantage of this approach is that sub-applications can be loaded whenever and wherever the business needs them

Method properties:

  • Name: area molecule application. Name is very important when you have multiple child applications, used for communication

  • Entry: Sub-application entry. The local environment and online environment may differ, and you need to configure the difference.

  • Container: a selector or Element instance of the container node of the microapplication

  • InitGlobalState enables communication between the master application and child applications.

The details of our use in the system are described below

System configuration at the primary site

The installation

"Qiankun" : "against 2.4.1,"Copy the code

Redirect all route changes that need to be migrated to the dedicated transfer page, in the turn around business Crm is

component: () => import('@views/Child')
Copy the code

Deploy the earthly load logic in child.jsx

import { loadMicroApp, initGlobalState } from 'qiankun'; that.microApp = loadMicroApp( { name: 'crmtest', entry: 'https://crm.xxxxxxx.com/childfirst', container: this.containerRef.current, props: { authList: this.props.authList } }, { getPublicPath: (v) => { return '//s1.xxxxxxx.com/biz/bizcrmweb_child_first/static/js/'; }});Copy the code

Commercial Crm uses loadMicroApp, which has the advantage of being very flexible and which microapplication to load can be dynamically configured and replaced at any time.

Sub-application system configuration

The child application uses UMI, so use it directly

"@ umijs/plugin - qiankun" : "2.22.0",Copy the code

This is the Qiankun plug-in provided by Umi, which is much easier to use than the original one. After installing the plugin, open the plugin in config.js under the config folder specified by UMI:

qiankun: {
    slave: {},
  },
Copy the code

The lifecycle methods are then declared on the entry file (usually app.js) for easy invocation by the main application. Note: Not exposing the life cycle will result in an error.

Export const qiankun = {// Async bootstrap(props) {console.log('app1 bootstrap', props)}, // Render before triggering async mount(props) {console.log('app1 mount', props); Props. OnGlobalStateChange ((state, prev) = > {/ / state: changed status; Console. log(state, prev, 'child application received message ')}) // props. SetGlobalState (state); }, // Async unmount(props) {console.log('app1 unmount', props)}}Copy the code

After the configuration is complete, start multiple projects and point the sub-application to the domain address specified by the master application. Then you can start debugging.

Pit pit q&A phase

1. Do sub-applications need to have routing configurations? How to jump?

The child application needs to have a complete route configuration. The master application points all the child application routes to the same page (CRM refers to the previously mentioned child.jsx) without differentiating between pages, but the routes are changed.

As follows:

  [{
    path: 'child',
    component: () => import('@views/Child'),
  }, {
    path: 'tools/paper',
    component: () => import('@views/Child'),
  }, {
    path: 'finance/saledetail',
    component: () => import('@views/Child')
  }]
Copy the code

The routing system of the child application will be enabled, and different pages will be loaded based on the current route.

2. How does the permission system work?

In the current scheme of CRM, the permission system is injected from the master application to the sub-application. Each time the route is switched, the master application loads the permission first and then the sub-application to ensure that the permission of the sub-application is updated in time.

Injection into the system using props

import { loadMicroApp, initGlobalState } from 'qiankun'; that.microApp = loadMicroApp( { name: 'crmtest', entry: 'https://crm.xxxxxxx.com/childfirst', container: this.containerRef.current, props: { authList: this.props.authList } }, { getPublicPath: (v) => { return '//s1.xxxxxxx.com/biz/bizcrmweb_child_first/static/js/'; }});Copy the code

3. How to ensure style isolation?

Style isolation is an important issue in microfront-end development.

In the process of sub-application switching, Qiankun will automatically cancel the style of the previous application to avoid interference between micro-applications.

Style interference between parent and child applications should be treated on a case-by-case basis.

If it is the style of the framework that interferes, for example, commercial Crm has the need for technical stack improvement (ANTD3 upgrade to ANTD4), it can be automatically converted by prefixing the framework style and using Webpack processing.

There are two ways to handle global custom styles. One is to follow the master application, and the child application is not configured with a special global style.

The second is to add application prefix, as well as CSS Module, can also solve the problem.

4. Why not enable Scoped CSS for style isolation?

For Vue framework systems, enabling Scoped CSS is a convenient solution. However, since React uses compositing events, enabling Scoped CSS opens a Shaow DOM container on the page, which causes events that bubble onto the document to fail to fire. So it can’t be used.

React officials are aware of the issue, however, and the new version no longer completely bubbles up on document.

5. Static resource configuration for test environment and online environment?

If the static resources of the company are not deployed under the system domain name, you can specify this by using the supplementary property getPublicPath in the entry

{ getPublicPath: (v) => { return '//s1.xxxxxxx.com/static/js/'; // Static resource link}}Copy the code

6. Why is a cross-domain message displayed when the primary application accesses sub-application resources?

This question has been officially answered

Since Qiankun acquired static resources introduced by microapplications through FETCH, it must require these static resources to support cross-domain.

If it is your own script, you can support it by developing server-side cross-domain support. If it is a three-party script and you cannot add a cross-domain header to it, you can drag the script to a local server to support cross-domain.

7. Why does the use of UMI’s Qiankun component cause unsafe access problems?

The problem is shown as follows:

If you access HTTP resources in HTTPS environment, the umi will throw this problem. This problem is mostly in the development phase, online deployment under the same domain will not be a problem.

The solution is to search for error blocking on node_modules and remove the safety code.

Or change both sites to HTTP access.

Umi’s @umijs/plugin-locale does not provide a custom prefix input parameter. How can I add a style prefix?

You can copy umi’s @umijs/plugin-locale component, add a prefix attribute yourself, and use it as a custom plug-in.

conclusion

The concept of micro front end has been put forward for a long time, but there are still many problems to be solved in the micro front end, and not all projects are suitable for the micro front end solution. This article has shared a kind of practice idea of micro front end, as well as various specific problems to deal with, hope to be helpful to everyone.

In addition, in addition to the current more popular qiankun, webpack5 launched module federation is also a very good scheme, we can also try.