Front end micro service solution 2 – necessity of use

Time:2021-4-23

User stories

A team of Muse uses vue2.0 framework to develop front-end pages.

Products will be launched in early 2019, and there will be business in production by the second half of 20207 types, page281, packaged size is180+MB. With the growth of time, the following phenomena gradually appear in the products:

  1. Most of them areRich business logicThere are many components of picture static resourcesPage.

  2. The introduction ofLots of scaffolding

  3. The complexity of the project, before and after there are many groups of people to develop, resulting in the current project of various types of resources confusion, low component reusability, huge static resources, more and more garbage components.

The rapid growth of front-end Vue projects has led to the emergence of projectsSlow compilationSlow packingOnline slowAnd so on.

At present, the main disadvantages of the product are as follows:

  • Compilation is too slow. There are many pages and resources in the project. If all the pages are compiled, there will be no end in 3 minutes. (this is still saving the page every time during the development process)
  • The packing speed is too slow. One of my colleagues’ MacBook Air packing speed is about half an hour. A lot of new colleagues would come to ask if they were dead and why they stopped when they packed for the first time. (my computer is the fastest of all, but it also takes 10 minutes +)
  • Online risk is high. The front-end Vue project is packaged as a whole every time and launched in full quantity. There is a saying on the Internet, “don’t put eggs in one basket.”. If the packaging is not maintained by a specially assigned person, some functions may be affected inexplicably. Even if developers are more careful, they may make mistakes in mentioning and deleting, which will affect other businesses.
  • The volume of engineering and packaging is getting larger and larger, which is not in line with the idea of agile iteration. Vue engineering resources are more and more, 170MB +, 200MB + and even 300MB +. If you don’t go offline and clean up, the project will become unmaintainable.

Comparison of engineering organization structure

Our engineering organizational structure Normal engineering organization structure
Front end micro service solution 2 - necessity of use Front end micro service solution 2 - necessity of use

From the color and the number of modules, we can find that our project is very large and unhealthy.

Think and change

Through the analysis of Muse products, and then combined with the Internet, this paper puts forward the problems faced by small and medium-sized enterprises.
The following problems need to be solved in Vue module pro

  • Independent deployment: each module can be deployed separately, and the granularity can be as small as that of a single page, without any impact on other modules
  • Expansion: each micro module can be expanded independently to meet business scalability and unnecessary consumption of resources
  • Risk reduction: reduce business risk by “putting eggs in multiple baskets.”. Only the corresponding micro module needs to be operated each time, and other micro modules are not affected
  • Controllable complexity: every UI business component belongs to every micro module, which can avoid code hegemony, reduce complexity, facilitate maintenance and improve development efficiency
  • Mutual communication: the global can communicate, and the components between micro modules can refer to each other.

As a high-performance front-end micro service solution, Vue module Pro can solve all the above problems.
At the same time, it integrates the latest ideas and design ideas of Vue on the Internet, and extracts its essence and its dross.
It solves the production problems, integrates new design ideas and concepts, develops a variety of practical front-end tools, and smoothly upgrades the old framework of the company.
Anyone can start this project quickly.

This work adoptsCC agreementReprint must indicate the author and the link of this article