A pluggable micro-frontend structure based on Vue and Webpack5 - Puzzle

Demo : PuzzleDemo

English | 中文

What is Puzzle

Puzzle is a project structure based on Vue and Webpack5. Business modules can be combined with structure modules like puzzles, and become a different system. All of this is hot pluggable in the production environment. This means you can add new functional modules to your system at any time，even revising the entire system without having to replace the entire project。

In addition, when multiple projects are developed using this structure, even if the modules are packaged by different projects, they can be quickly combined in a production environment. Modules can be reused very simply.

Features

• Core: Support production environment module hot swap

• Support flexible combination of business modules

• The frame of the system as a frame module and also supports multiple coexistences (which means you can easily perform grayscale tests)

How to do it

1. Package the frame/business module as umd module with webpack
2. Mounting these modules via LoadJS will append the module object to the window object.
3. Load the object into the schema by dynamic routing

Run this project

Development environment

Installation dependence

npm install

Building third-party dependencies

npm run dll

Run

npm start

Production Environment

Installation dependence

npm install

Building third-party dependencies

npm run dll

Build, in this step you can choose the frame module and business module that need to be packaged for flexible combination

npm run build

Hot swap related

The front-end project loads the module according to the back-end menu request. For example, the back-end request return format in this project is (data from Alibaba Cloud):

[
  {
    id: "elastic",
    name: "弹性计算",
    leaf: false,
    children: [
      {
        id: "ecs",
        name: "云服务器 ECS",
        leaf: true,
        page: "/ecs",
        puzzle: "elastic"
      },
      // ...
    ],
    icon: "aperture",
    puzzle: "elastic"
  },
  {
    id: "database",
    name: "数据库",
    leaf: false,
    children: [
    	// ...
    ],
    icon: "aperture",
    puzzle: "database"
  },
  // ...
]

Let us stipulate that the first level directory is the module directory (this can be modified by looking at your own needs here).

So the module ID is elastic, database, etc. The system will request the entry files of all subsystems(modules) in the production environment, try to load the module, and generate routes.

Therefore, by returning the results of different user service modules of different users, it is possible to load different modules, thereby performing authority control.

Similarly, through different user's different frame module return results, you can load different frame to perform grayscale testing and other operations (currently the base used in the system is written in public/config.js, The article is for reference only, the project itself can be freely used).

Individually packaged schema

npm run core

Individually packaged frame module

npm run frame --name="xxx"

Individually packaged business module

npm run puzzle --name="xxx"

The module packaged by the above operation can be directly added to the production environment or replace the corresponding module of the production environment.

Code structure

Development environment structure

config

This folder contains all packaged configuration files for webpack

public

config.js：Project configuration for production environment configuration

index.html：HTML template

src -> core

Schema code

src -> frames

Base module code, multiple base modules placed side by side

src -> puzzles

Business module code, multiple business modules placed side by side

static

Mainly used to place static resources, will be directly copied to the production environment static folder

static -> dll

Third-party libraries and public code generated by npm run dll

Production environment structure

The production environment code is placed according to a certain structure, and the corresponding module can be freely upgraded.

core

Schema code generated by npm run core

frames

Base module code generated by npm run frame

puzzles

Business module code generated by npm run puzzle

static

Static resources, including package generated third-party libraries and public code, etc.

PS

This structure is only a summary of daily work, specific business scenarios can be modified, the base module can be freely played; the information returned by the business module can also be increased according to requirements; as long as each module follows certain standards and is in the core Uniform processing can achieve pluggable effects.