This article is simultaneously published on my blog: Front-end Microarchitecture Practices

preface

In order to split and properly decouple and aggregate business modules, we need to adopt a friendly development model to solve these problems. Our vision is:

  • ☕️ The main project is independently developed and deployed
  • 🔥 Master keep hot updates while developing subprojects
  • 🚗 The main project provides the routing container, and the subprojects are just views mounted into the container
  • 👊 The host and subproject share a single Vue, Router, or Store instance to ensure that global components or Vue plug-ins can be shared
  • The 📦 subproject is dynamically injected into the main project container during development and packaged without containing any main project code
  • 💻 does not involve the Node service, and the configuration file is stored in the CDN

Tips: In order to avoid the large size of the main project package, you can extract the library code as CDN import (default), which will be faster to download when subprojects are dynamically injected.

⚠️ About loading on demand, in the development environment, because webpack devServer will not load resources across projects, so it is impossible to do, of course, you can transform the loading logic of Webpack, set the resource origin to be loaded as the Origin in the project menu configuration. If the static resources of the master and sub-project are deployed in the same directory, it can be loaded on demand.

The development process

1. Install the Micro-structure-CLI plug-in

npm install -g micro-structure-cli
Copy the code

2. Create a configuration file and access the file through HTTP

Tips: At development time, you can create in the /public/ directory of the main project

Example configuration file structure:

/* * The configuration file corresponds to the loader logic */
window._MICRO_APP_CONFIG = {
  // Configuration of the development environment
  devMenu: [
    {
      // A unique identifier for the resource to avoid duplicate loading
      id: 'index'.name: 'home'.path: '/'.// The path of the project entry file, i.e. the address after origin is removed below
      urlPath: '/app.js'.// The origin is extracted for the purpose of judging
      // Whether the project resource corresponding to the current route is the current devServer to avoid repeated loading
      origin: 'http://localhost:8080'}].// Non-development environment
  normalMenu: []
}
Copy the code

3. Create the main project

Initializes the selection of the main project
micro init

Prompt for menu configuration file URL

# install dependenciesNPM install Starts the NPM run serve serviceCopy the code

4. Create subprojects

Initialize the selection subproject
micro init

# install dependencies
npm install 

Install the main project resource injection plugin
vue add micro

# start service
npm run serve

In the configuration file, add the menu information for the subproject

When the main project is updated, run the command to refresh automatically
npm run micro
Copy the code

loader

Loaders exist in the main project to load the subproject corresponding to the current path, and add guards to the route to load the subproject corresponding to the route before leaving.

The window object _MICRO_APP_CONFIG loader logic exposed by the configuration file above is also under this object

Window. _MICRO_APP_CONFIG = {// Menu list of differentiated environments: [], // load method:function(menuItem) {}, // Guard addWatch added to the route at initialization:function() {}}Copy the code

If it is a normal route jump, the loader will handle it automatically. If preloading is required, the load method can be triggered manually.

Tips: Loading is not implemented

The flow chart

Finally, the complete project address: Micro-structure

Applicable scenario

Business complex in Taiwan system need not say more, it is necessary. In addition, the same nature of simple pages, such as a marketing campaign page, can be abstracting library, request, common logic to the main project, the sub-project only focus on the activity itself, reducing the size of the project, can be very effective speed up development.

In other words, the services that belong to a module are not assigned to the subprojects, but are routing sets. The services that belong to the same category in morphology and structure can also be assigned to the subprojects.

extension

This is obviously based on Vue and the Vue prototype. How about React? Or do master and sub-projects cross technology stacks? I think those are all easier to think about and implement. Because that’s what’s going to happen.