qiankun

Qiankun is a single-SPa-based micro-front-end implementation library, and micro-applications can be independently developed and deployed.

What is a micro front end

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. — Micro Frontends

The micro front end is a kind of technical means and method strategy that multiple teams jointly build modern Web applications by releasing functions independently.

The micro front-end architecture has the following core values:

  • Technology stack independent main framework does not limit access to the application stack, microapplications have full autonomy

  • Independent development, independent deployment of micro application warehouse independent, the front and back end can be independently developed, after the deployment of the main framework automatically complete synchronization update

  • The incremental upgrade

    In the face of a variety of complex scenarios, it is usually difficult to upgrade or reconstruct the existing system completely, and the micro front end is a very good means and strategy to implement the gradual reconstruction

  • Independent run time States are isolated between each microapplication and run time states are not shared

Module Federation

Module federation is also a micro front end that can be granular to a single page application or component. Each word application is built separately, and the master application loads remote modules, the child application’s build, at run time through the container. The main application automatically uses the latest resources of the current version of the child application.

Examples and projects are connected to Qiankun

Project MF1, providing shared modules (Sub-project of Qiankun)

The MF1 shared module is SRC/Components /Button

import React from 'react'; Const Button =() => {return (<div>< Button ></div>); } export default Button;Copy the code

Mf1 config configuration

const { ModuleFederationPlugin } = require("webpack").container; const { REACT_APP_ENV, NODE_ENV } = process.env; const publicPath = NODE_ENV === 'production' ? '/ publicPath' : '/'; /** * dev environment * publicPath: '/qiankun/zeusCI/', memo.output.publicPath('auto') must be annotated to run properly. An OBJECT object will go up in an object. An OBJECT object will go up in an object. An OBJECT object will go up in an object. / */ export default defineConfig({base: '/ XXX ', publicPath, exposes: {slave: { } }, antd: {}, dva: { hmr: true, }, history: { type: 'hash', }, dynamicImport: { loading: '@ / components/PageLoading/index, mfsu:}, {}, / / umi3.5.13 version introduction, accelerate building webpack5: {}, chainWebpack(memo) { memo.output.publicPath('auto'); ModuleFederationPlugin ('mf'). Use (ModuleFederationPlugin, [{name: "mf1", // The name must match the entry name filename: 'remoteEntry. Js, exposes: {". / Button ":'. / SRC/components/Button/index ', / /} Shared module,}]); }, targets: { ie: 11, }, // umi routes: https://umijs.org/docs/routing routes, // Theme for antd: https://ant.design/docs/react/customize-theme-cn theme: { 'primary-color': defaultSettings.primaryColor, }, title: false, ignoreMomentLocale: true, proxy: proxy[REACT_APP_ENV || 'dev'], manifest: { basePath: '/xxx', }, exportStatic: {}, esbuild: {}, });Copy the code

Project 2: Introduction and use of MF1 sharing module (Qiankun Sub-project)

Project 2 page/index

import styles from './index.less'; import React from 'react' import {Card} from 'antd' const Mf1Button = React.lazy(() => import("mf1/Button")); Export default function IndexPage() {return (<div> <Card title="module federatino application "> < react.suspense fallback='loading'> <Mf1Button /> </React.Suspense> </Card> </div> </div> ); }Copy the code

Item 2 Config configuration

qiankun: { slave: {} }, antd: {}, dva: { hmr: true, }, plugins: [ ], locale: { // default zh-CN default: 'zh-CN', // default true, when it is true, will use `navigator.language` overwrite default baseNavigator: true, }, dynamicImport: { loading: '@/components/PageLoading/index', }, webpack5: {}, chainWebpack(memo) { memo.output.publicPath('auto'); memo .plugin('mf') .use(ModuleFederationPlugin, [{ name: "submodule", filename: 'submodule.js', exposes:{ "./ProductList": './src/components/ProductList/index' }, remotes: {/ / remote module/reference/dev environment "mf1 @ / / localhost: 7001 / remoteEntry. Js" mf1: "mf1@//xxxx.com/publicPath/remoteEntry.js"},}}]),Copy the code

Project 2 Launch

Note ⚠ ️

Shared modules do not allow hooks

Remotes does not require HTTPS or HTTP

An object reception must be “./Button”: “….”

-   'Button': './src/components/Button'
+   './Button':'./src/components/Button'
Copy the code

conclusion

Module federation provides for separate build and deployment, with the main application only loaded at run time. The principal application defines common libraries as shared modules to avoid duplication in page builds. Compared to NPM packages have great convenience. However, when it was mixed with Qiankun, the practical operation effect was not good. At present, MF is used in the project. It is recommended to use CRA to initialize the project, or EMP architecture.

Welcome your comments.