I always wanted to write this article, but I was too busy and bad at writing, so I wrote slowly and intermittently for a long time. Without further ado, let’s get to the point!

There are many solutions for front-end microservices architecture, such as Alibaba’s Qiankun, for Vue, React, Angular, and even native and jquery. However, the cost of learning is relatively high and large, which is not suitable for small and medium-sized single-frame products. Therefore, I would like to introduce the architecture of another front-end micro-service solution: KFC. Currently, vue and React are only under development. Suitable for small and medium vUE products without historical burden, traditional NGINx + HTML mode deployment, simple and easy to maintain. We have been using this architecture for one and a half years, and it is stable online and has high loading efficiency.

The official website link is: Ks3-cn-beijing.ksyun.com/bigdata-fe/…

Previous architecture diagram:The main idea is that the main project loads the resources of its children through a JSON configuration file. Each subproject is a Git repository, and each subproject is a line of business maintained by one or two people. Here’s another code architecture diagram:Each subproject has a devmain.js and promain.js. DevMain is used to run locally and proMain is used to package distribution. ProMain packages only the router, which is the business part of the code, and injects the business into the subproject via window.bapp.registerApp.

There are two points to note:

1. The devmain.js of the main project and the devmain.js of the subproject must be consistent, otherwise the online performance will be inconsistent with the local server performance

2. Mixins of the main project and subprojects should be consistent

Main project and sub-project configuration, interested in the official documentation can see. The JSON that generates the configuration file is written in shell. Of course, node and Python can write, first paste our shell generated JSON partWe use Jenkins to release tools, watch out!! The output filename of each subproject should be the same as the projectKey in SRC /js/util.js, which is used by the main project to find the static resources of the subproject.Jenkins: Add SCM for the main project and sub-project, then check out to a sub-directory for each. Of course, nodes can do the same with local pull-down projects, with the ultimate goal of grouping the main project and its subprojects together.

Those who are interested can check out the next two posts, which will be updated later:

Vue-based front-end microservices architecture solution 2- Plug-in separation(Portal: Juejin. Cn/post / 692302… ）

Vue – based front-end microservice architecture solution 3- sub-project optimization(Portal: Juejin. Cn/post / 692422… ）