Come on, boy

1. When should we use microfront-end scenarios

The concept of a micro front end has been around for a long time, and again, without further explanation, generally speaking, the micro front end is still in a state of white flowers.

  • Garfish: Byte system microfront-end development framework

  • Single-spa: The earliest microfront-end framework, compatible with multiple front-end stacks.

  • Qiankun: An open source micro-front-end framework based on Single-SPA.

  • Icestark: Ali Feibing micro front end framework, compatible with a variety of front end technology stack.

  • Ara Framework: A micro front end extended by server rendering

This paper mainly through the practice of Qiankun, the author encountered problems in the development process, do a share

2. Hand off for example

  • Most bloggers use Vue as a pedestal, we use React as a pedestal
  • Create three projects with create-react-appmain react1 react2
npx create-react-app main
npx create-react-app react1
npx create-react-app react2
Copy the code
  • The main project entry file is modified to register microapplications through registerMicroApps
registerMicroApps(
  [
    {
      name: 'react1'.// The micro package name corresponds to output.library
      entry: '//localhost:10001'.// Specifies the port required by the sub-application
      container: '#warp'./ / container ID
      loader,  // Optional, this method is called when the loading state changes
      activeRule: '/react1'.// URL activation rule
    },
    {
      name: 'react2'.// The micro package name corresponds to output.library
      entry: '//localhost:10002'.// Specifies the port required by the sub-application
      container: '#warp'./ / container ID
      loader,  // Optional, this method is called when the loading state changes
      activeRule: '/react2'.// URL activation rule},]);Copy the code
  • Call the start function when appropriate
  • After a microapplication is created, it needs to be addedconfig-overrides.jsMake a change to the webPack configuration
const path = require("path");
const { name } = require('./package');

module.exports = {
  webpack: (config) = > {
    // The package name of the micro-application, which is the same as the registered micro-application name in the main application
    config.output.library = `${name}-[name]`;
    // Expose your library in a way that all module definitions work
    config.output.libraryTarget = "umd";
    // Load as needed, set it to webpackJsonp_react1
    / / website example inside the config. The output. JsonpFunction = ` webpackJsonp_ ${name} `;
    // Found that 'jsonpFunction' configuration is changed to 'chunkLoadingGlobal' in Webpackage 5

    config.output.chunkLoadingGlobal = `webpackJsonp_${name}`; config.resolve.alias = { ... config.resolve.alias,"@": path.resolve(__dirname, "src"),};return config;
  },

  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // Turn off host checking so that microapplications can be fetched
      // config.disableHostCheck = true;
      // Configure cross-domain request headers to solve cross-domain problems in the development environment
      config.headers = {
        "Access-Control-Allow-Origin": "*"};// Configure the history mode
      config.historyApiFallback = true;

      returnconfig; }; }};Copy the code
  • Pass after configuring the portreact-app-rewiredTo launch the app, and it’s running smoothly

  • Pass in the react2 subprojectloadMicroAppLoading react1
useEffect(() = > {
    const microApps = loadMicroApp({
      name: 'react2'.entry: '//localhost:10001'.container: '#containerRef'.props: { brand: 'qiankun'}});return () = >{ microApps.unmount(); }}, [])Copy the code

  • Such http://localhost:10000/react2 application contains two micro (multi-instance scenario) when qiankun1.0 is actually does not support

  • The code address

3. Problems encountered in the project development of Qiankun

  • When we actually write an example ourselves, you will find that you are familiar with the Api, so what are the problems in actual development? Next, I will introduce the problems we encountered when accessing Qiankun

One: Initially we used a strict sandbox model

sandbox: {
    strictStyleIsolation: true
 }

Copy the code

At the beginning, I did not read the official documentation carefully, leading to some style loss in some scenes. For example, when you add a popbox, the popbox is added to the bottom of the DOM inside the body, the style will be lost

  • Reason: In strict sandbox mode, a node of Shadow DOM (an important property of Web Components is encapsulation) will be added to each micro-application, resulting in complete isolation of styles in Shadom and outside, resulting in style loss

2. In actual development, we added a traditional jquery project according to the official documentation

const render = $ => {
  $('#purehtml-container').html('Hello, render with jQuery');
  return Promise.resolve();
};

(global= > {
  global['purehtml'] = {
    bootstrap: () = > {
      console.log('purehtml bootstrap');
      return Promise.resolve();
    },
    mount: () = > {
      console.log('purehtml mount');
      return render($);
    },
    unmount: () = > {
      console.log('purehtml unmount');
      return Promise.resolve(); }}; }) (window);

Copy the code

  • When I run the jquery project alone, everything works fine. When I run the jquery project alone, everything works fine

  • When we query a lot of data, we find that the code is actually executed in the sandbox, var is no longer declared as a global variable, function is also declared, such variable functions between two JS files can not access each other, only hanging on the window can access each other

  • As a result, I spent a lot of time to modify the global variables declared in each dependent file, or function to mount them on the window, and gradually fixed all the problems. At this time, I found that it also took me a lot of time to modify the old code, especially for large code modification

  • When using a traditional jQuery project, we should consider it carefully, because it may cause a lot of intrusion and changes to the previous project (iframe is recommended).

Three: sub-project loading is a bit slow scenario

  • In many cases, because of some legacy issues, a project is very large. It could be that the project has been in the company for many years, but every month there is a new development task to iterate on, and that’s when we plug in the micro front end

  • When we connected a very large sub-project, Qiankun, for the first time, we found that the page loading speed was a little slow. After all, there were a lot of things in qiankun, because import-HTml-entry was used to load and analyze the sub-project

Four: Clear useless instances during uninstallation

  • During the development process, the application crashed several times while reloading, so the instance was unloaded;
export async function unmount(props) {
    ReactDOM.unmountComponentAtNode();
    // ... more
}
export async function unmount() { 
    instance.$destroy() 
    instance.$el.innerHTML = ' '
    instance = null 
    route = null
    // ... more
}
Copy the code

1, the epilogue

  • Thank you all for your likes and attention