I have always wanted to write this article, but Nai He is too busy and the writing is poor, writing is very slow, and I have been writing intermittently for a long time. Let s not say much to get into the topic!
At present, there are many solutions for the front-end microservice architecture, such as Ali's qiankun, which is suitable for vue, react, angular, and even native and jquery. However, the cost of learning is relatively high, and it is relatively large, which is not suitable for small and medium-sized single-frame products. So I will introduce to you the architecture of another front-end microservice solution: KFC, which is currently a pure solution to vue, and react is still under development. It is suitable for small and medium-sized Vue products without historical burden. The traditional nginx+html mode is deployed, which is simple and easy to maintain. We have been using this architecture for a year and a half. It is stable online and has high loading efficiency.
The official website link is: ks3-cn-beijing.ksyun.com/bigdata-fe/...1.
let's look at the architecture diagram: The main idea is that the main project loads the resources of the sub-projects through the json configuration file. Each sub-project is a git repository, and each sub-project is a business line maintained by one or two people. Here is another code architecture diagram: Each sub-project has a devMain.js and proMain.js. devMain is used to run locally, and proMain is used to package and release. ProMain only packages the router, which is the business part of the code, and injects the business into the sub-projects through window.bapp.registerApp in proMain.
Then there are two points to note:
1. The main.js of the main project and the devMain.js of the sub-project should be consistent, otherwise the online performance of the local server will be inconsistent.
2. The mixin of the main project and the sub-project should be consistent. The
main project And the configuration of sub-projects, if you are interested, you can check it in the official documentation. The json that generates the configuration file is written in a shell. Of course, both node and Python can be written. If we paste our shell to generate the json part of the release tool, we will use jenkins, pay attention! ! ! The output file name of each subproject must be consistent with the projectKey in src/js/util.js in the subproject. The main project uses the projectKey to find the static resources of the subproject. To publish jenkins, add scm to the main project and sub-projects, and then select each to check out to a sub-directory. Of course, you can do the same thing if you pull down the node locally, the ultimate goal is to pack the main project and sub-projects together.
Interested students can pay attention to the next two articles, which will be updated later:
Vue-based front-end microservice 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... )