All that packaging optimization stuff

Recently I received a project. Let me show you the general structure of the project

Project structure

Maybe you don’t understand it very well. In fact, each cuboid box is a sub-project, that is to say, each sub-project is independent. At first glance, it looks like a micro front end, right?

But he is a micro front end of his own yy, not the real sense of the micro front end

Why not a micro front end?

Microfront-end is a kind of architecture similar to microservices, which applies the concept of microservices to the browser side, that is, the single-page front-end application is transformed from a single single application to a number of small front-end applications into one application. Each front-end application can also be independently developed and deployed.

At present, the framework I have taken over cannot be independently deployed, and every time I package it, I need to run other projects again, which causes a lot of performance waste, and the package command is: npm-run-all -p build:*, please see the following figure for this

package.json

Npm-run-all -p build:* Run so many projects that there is a problem, it is easy to run out of memory, leading to failure… Besides, the machine configured by the company is EMMMMMMM. Because of this, I can’t bear it anymore and plan to optimize the following two points:

  1. Packing success rate
  2. Packaging time

To optimize the

Package success rate optimization

There are two optimizations

Set the maximum amount of parallelism using max-parallel

Set max-parallel to set the maximum amount of parallelism to reduce packaging failures

NPM – run – all documents

Code:

"build": "npm-run-all -p build:* --max-parallel 5".Copy the code

Partially parallel – partially serial

Let’s say I have 15 quests to pack, and I want to split them into 3 quest lines; 3 task lines in parallel; Then each task in the task line, in order to execute

So the first thing that comes to mind is to use the -p command and –serial, and you have the following code:

{
  "name": "vue-static"."version": "2.9.6"."description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features"."author": "Wei Jie <[email protected]>"."license": "MIT"."scripts": {
    "build": "npm-run-all -p build1 build2 build3 build4 build5"."build1": "npm-run-all --serial build1:*"."build2": "npm-run-all --serial build2:*"."build3": "npm-run-all --serial build3:*"."build4": "npm-run-all --serial build4:*"."build5": "npm-run-all --serial build5:*". },... }Copy the code

test

Both of these scenarios are utopian, so we need to test the results

conclusion

First of all, the two days’ testing: the idea of plan 1 and Plan 2 is correct. Overall, there is no memory shortage in packaging, which is a small surprise, and the packaging speed is within the ideal range. In the following days, we will continue to test and accelerate the packaging speed.

If there is any better optimization method, welcome to leave a comment! Thank you very much!