Micro-front-end construction method based on micro-module

Abstract

The invention discloses a micro front end construction method based on a micro module, and relates to the technical field of cloud resource evaluation. An impart-html-entry is used as a micro-module framework, a novel micro-front-end framework is constructed based on a micro-front-end framework qiankun, and the method comprises the steps of 1, creating a micro-module: creating a vue project by using vue-cli, and modifying the content for creating a vue instance in main.js to export a vue custom component MyCompent, 2, creating a micro-front end of the micro-module: creating a vue project by using vue-cli, modifying a main.js file, and exporting the vue custom component MyCompent, the method comprises the following steps of: 1, exporting a corresponding life cycle hook required by a novel micro-front-end framework, 2, loading a micro-front-end through a main application: loading the micro-front-end by using a loadMicroApp method of the novel micro-front-end framework, 4, loading a micro-module through the micro-front-end by using imprt-html-entry, and 5, rendering a MyComponent component through the micro-front-end, so that the micro-front-end framework encapsulates the micro-module, the size of the micro-module is reduced, and the micro-front-end framework is used for loading the micro-module. The operation efficiency is improved.

Description

Technical Field

[0001] The invention discloses a micro-front-end construction method based on a micro-module, and relates to the technical field of cloud resource evaluation. Background Art

[0002] With the rapid development of Internet technology, the complexity and scale of web applications are growing, and the existing monolithic application development model can no longer meet the needs of the market. Micro front-ends, as an emerging development model, allow multiple teams to independently release and maintain different parts of an application, but there are problems such as large packaging size of each sub-application and high performance overhead of loading multiple sub-applications at the same time. Summary of the invention

[0003] In view of the problems of the prior art, the present invention provides a micro-front-end construction method based on micro-modules, which splits the functions in the micro-front-end into micro-modules and extracts the runtime of the micro-modules to the micro-front-end, thereby realizing the organic combination of the micro-modules and the micro-front-end, effectively improving development efficiency, reducing maintenance costs, and enhancing the scalability and maintainability of the application.

[0004] The specific scheme proposed by the present invention is:

[0005] The present invention provides a micro-frontend construction method based on micro-modules, using import-html-entry as a micro-module framework, and constructing a novel micro-frontend framework based on the micro-frontend framework qiankun, including:

[0006] Step 1: Create a micromodule: Use vue-cli to create a vue project, modify the content of creating a vue instance in main.js to export the vue custom component MyComponent,

[0007] Step 2: Create a micro-frontend for the micromodule: Use vue-cli to create a vue project, modify the main.js file, and export the corresponding lifecycle hooks required by the new micro-frontend framework.

[0008] Step 3: Load the micro frontend through the main application: Use the loadMicroApp method of the new micro frontend framework to load the micro frontend.

[0009] Step 4: Load the micromodule using import-html-entry through the micro frontend,

[0010] Step 5: Render the MyComponent component through the micro-frontend to implement the micro-frontend framework to encapsulate the micro-module, reduce the size of the micro-module, and improve operating efficiency.

[0011] Further, in step 3 of the micro-frontend construction method based on micro-modules, loading the micro-frontend through the main application includes:

[0012] Import the micro-frontend loading method loadMicroApp from the new micro-frontend framework,

[0013] Set the option information of the micro-frontend loading method loadMicroApp, including the name value name as container, the entry address value entry as the entry of the micro-frontend application, and the container value container as the id value of the corresponding div in html.

[0014] Further, in step 4 of the micro-frontend construction method based on micro-modules, the micro-module is loaded by using import-html-entry through the micro-frontend, including:

[0015] Import importHTML from import-html-entry,

[0016] Asynchronously execute importHTML and get the function execScripts.

[0017] Asynchronously execute the execScripts method to get the myModule definition.

[0018] Further, in step 5 of the micro-frontend construction method based on micro-modules, rendering the MyComponent component through the micro-frontend includes:

[0019] Define the component name as MyComponent,

[0020] The value of MyComponent in myModule is imported.

[0021] Use vue's component component to render the MyComponent component.

[0022] The present invention also provides a micro-frontend construction device based on micro-modules, including a micro-module management module, a micro-frontend management module, a loading module and a rendering module.

[0023] The micromodule management module uses import-html-entry as the micromodule framework. The microfrontend management module builds a new microfrontend framework based on the microfrontend framework qiankun.

[0024] Micromodule management module Create a micromodule: Use vue-cli to create a vue project, modify the content of creating a vue instance in main.js to export the vue custom component MyComponent,

[0025] Micro front-end management module creates a micro front-end of a micro module: use vue-cli to create a vue project, modify the main.js file, and export the corresponding life cycle hooks required by the new micro front-end framework.

[0026] The main application loads the micro frontend through the micro frontend management module: the loadMicroApp method of the new micro frontend framework is used to load the micro frontend.

[0027] The micro frontend uses import-html-entry to load the micro module by loading the module.

[0028] The micro front-end renders the MyComponent component through the rendering module, implements the micro front-end framework to encapsulate the micro module, reduces the size of the micro module, and is used to improve operating efficiency.

[0029] Further, the main application of the micro-frontend construction device based on micro-modules loads the micro-frontend through the micro-module management module, including:

[0030] Import the micro-frontend loading method loadMicroApp from the new micro-frontend framework,

[0031] Set the option information of the micro-frontend loading method loadMicroApp, including the name value name as container, the entry address value entry as the entry of the micro-frontend application, and the container value container as the id value of the corresponding div in html.

[0032] Furthermore, the micro-frontend of the micro-frontend construction device based on micro-module uses import-html-entry to load the micro-module through the loading module, including:

[0033] Import importHTML from import-html-entry,

[0034] Asynchronously execute importHTML and get the function execScripts.

[0035] Asynchronously execute the execScripts method to get the myModule definition.

[0036] Further, the micro-frontend of the micro-frontend construction device based on micro-module renders the MyComponent component through the rendering module, including:

[0037] Define the component name as MyComponent,

[0038] The value of MyComponent in myModule is imported.

[0039] Use vue's component component to render the MyComponent component.

[0040] The benefits of the present invention are:

[0041] Placing business logic code in micromodule components and loading micromodule components through container micro-frontends effectively solves the problems of large packaging size of each sub-application and high performance overhead of loading multiple sub-applications at the same time in existing micro-frontend methods. It realizes the core values ​​of technology stack independence, independent development and deployment, and incremental upgrades, improves development efficiency, reduces maintenance costs, and enhances the scalability and maintainability of applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0043] Figure 1 It is a schematic flow chart of the method of the present invention. DETAILED DESCRIPTION

[0044] The present invention is further described below in conjunction with the accompanying drawings and specific embodiments so that those skilled in the art can better understand the present invention and implement it, but the embodiments are not intended to limit the present invention.

[0045] Example 1

[0046] The present invention provides a micro-frontend construction method based on micro-modules, using import-html-entry as a micro-module framework, and constructing a novel micro-frontend framework based on the micro-frontend framework qiankun, including:

[0047] Step 1: Create a micromodule: Use vue-cli to create a vue project, and modify the content of creating a vue instance in main.js to export the vue custom component MyComponent.

[0048] The code example is as follows:

[0049]

[0050] Step 2: Create a micro-frontend for the micromodule: Use vue-cli to create a vue project, modify the main.js file, and export the corresponding lifecycle hooks required by the new micro-frontend framework.

[0051] Step 3: Load the micro frontend through the main application: Use the loadMicroApp method of the new micro frontend framework to load the micro frontend.

[0052] May further exclude:

[0053] Import the micro-frontend loading method loadMicroApp from the new micro-frontend framework,

[0054] Set the option information of the micro-frontend loading method loadMicroApp, including the name value name as container, the entry address value entry as the entry of the micro-frontend application, and the container value container as the id value of the corresponding div in html.

[0055] The code example is as follows:

[0056]

[0057] Step 4: Load the micromodule using import-html-entry through the micro frontend.

[0058] It may further include:

[0059] Import importHTML from import-html-entry,

[0060] Asynchronously execute importHTML and get the function execScripts.

[0061] Asynchronously execute the execScripts method to get the myModule definition.

[0062] Here is an example:

[0063] / / Import importHTML from import-html-entry

[0064] import importHTML from'import-html-entry';

[0065] / / Asynchronously execute importHTML to get the function execScripts

[0066] const{execScripts}=await importHTML('micromodule address');

[0067] / / Asynchronously execute the execScripts method to get the myModule definition

[0068] const myModule=await execScripts(window,false);

[0069] Step 5: Render the MyComponent component through the micro-frontend to implement the micro-frontend framework to encapsulate the micro-module, reduce the size of the micro-module, and improve operating efficiency.

[0070] It may further include:

[0071] Define the component name as MyComponent,

[0072] The value of MyComponent in myModule is imported.

[0073] Use vue's component component to render the MyComponent component.

[0074] Here is an example:

[0075] / / Define the component name as MyComponent

[0076] const compName='MyComponent';

[0077] / / Introduce the value of MyComponent in myModule

[0078] const MyComponent=myModule[compName];

[0079] / / Use vue's component component to render the MyComponent component

[0080] <component:is="MyComponent" / >

[0081] Example 2

[0082] The present invention also provides a micro-frontend construction device based on micro-modules, including a micro-module management module, a micro-frontend management module, a loading module and a rendering module.

[0083] The micromodule management module uses import-html-entry as the micromodule framework. The microfrontend management module builds a new microfrontend framework based on the microfrontend framework qiankun.

[0084] Micromodule management module Create a micromodule: Use vue-cli to create a vue project, modify the content of creating a vue instance in main.js to export the vue custom component MyComponent,

[0085] Micro front-end management module creates a micro front-end of a micro module: use vue-cli to create a vue project, modify the main.js file, and export the corresponding life cycle hooks required by the new micro front-end framework.

[0086] The main application loads the micro frontend through the micro frontend management module: the loadMicroApp method of the new micro frontend framework is used to load the micro frontend.

[0087] The micro frontend uses import-html-entry to load the micro module by loading the module.

[0088] The micro front-end renders the MyComponent component through the rendering module, implements the micro front-end framework to encapsulate the micro module, reduces the size of the micro module, and is used to improve operating efficiency.

[0089] As the information interaction and execution process between the modules in the above-mentioned device are based on the same concept as the embodiment of the method of the present invention, the specific contents can be found in the description of the embodiment of the method of the present invention and will not be repeated here.

[0090] Similarly, the device of the present invention can place the business logic code in the components of the micromodule, and load the components of the micromodule through the container micro-frontend, effectively solving the problem of large packaging volume of each sub-application and high performance overhead of loading multiple sub-applications at the same time in the existing micro-frontend method. It realizes the core values ​​of technology stack independence, independent development and deployment, and incremental upgrades, improves development efficiency, reduces maintenance costs, and enhances the scalability and maintainability of applications.

[0091] It should be noted that not all steps and modules in the above-mentioned processes and device structures are necessary, and some steps or modules can be ignored according to actual needs. The execution order of each step is not fixed and can be adjusted as needed. The system structure described in the above-mentioned embodiments can be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by multiple physical entities, or some components in multiple independent devices may be implemented together.

[0092] The above-described embodiments are only preferred embodiments for fully illustrating the present invention, and the protection scope of the present invention is not limited thereto. Equivalent substitutions or changes made by those skilled in the art based on the present invention are within the protection scope of the present invention. The protection scope of the present invention shall be subject to the claims.

Claims

1. A micro-frontend construction method based on micro-modules, characterized by Use import-html-entry as the micro-module framework and build a new micro-frontend framework based on the micro-frontend framework qiankun, including: Step 1: Create a micromodule: Use vue-cli to create a vue project, modify the content of creating a vue instance in main.js to export the vue custom component MyComponent, Step 2: Create a micro-frontend for the micromodule: Use vue-cli to create a vue project, modify the main.js file, and export the corresponding lifecycle hooks required by the new micro-frontend framework. Step 3: Load the micro frontend through the main application: Use the loadMicroApp method of the new micro frontend framework to load the micro frontend. Step 4: Load the micromodule using import-html-entry through the micro frontend, Step 5: Render the MyComponent component through the micro-frontend to implement the micro-frontend framework to encapsulate the micro-module, reduce the size of the micro-module, and improve operating efficiency.

2. According to the micro-module-based micro-front-end construction method of claim 1, it is characterized by In step 3, the micro frontend is loaded through the main application, including: Import the micro-frontend loading method loadMicroApp from the new micro-frontend framework, Set the option information of the micro-frontend loading method loadMicroApp, including the name value name as container, the entry address value entry as the entry of the micro-frontend application, and the container value container as the id value of the corresponding div in html.

3. According to the micro-module-based micro-front-end construction method of claim 1, it is characterized by: In step 4, the micromodule is loaded through the micro front end using import-html-entry, including: importHTML from import-html-entry, Asynchronously execute importHTML and get the function execScripts. Asynchronously execute the execScripts method to get the myModule definition.

4. According to the micro-module-based micro-front-end construction method of claim 1, it is characterized by In step 5, MyComponent is rendered through the micro front end, including: Define the component name as MyComponent, The value of MyComponent in myModule is imported. Use vue's component component to render the MyComponent component.

5. A micro-frontend construction device based on micro-modules, characterized in that Including micro-module management module, micro-front-end management module, loading module and rendering module, The micromodule management module uses import-html-entry as the micromodule framework. The microfrontend management module builds a new microfrontend framework based on the microfrontend framework qiankun. Micromodule management module Create a micromodule: Use vue-cli to create a vue project, modify the content of creating a vue instance in main.js to export the vue custom component MyComponent, Micro front-end management module creates a micro front-end of a micro module: use vue-cli to create a vue project, modify the main.js file, and export the corresponding life cycle hooks required by the new micro front-end framework. The main application loads the micro frontend through the micro frontend management module: the loadMicroApp method of the new micro frontend framework is used to load the micro frontend. The micro frontend uses import-html-entry to load the micro module by loading the module. The micro front-end renders the MyComponent component through the rendering module, implements the micro front-end framework to encapsulate the micro module, reduces the size of the micro module, and is used to improve operating efficiency.

6. A micro-front-end construction device based on micro-modules according to claim 5, characterized in that The main application loads the micro frontend through the micro module management module, including: Import the micro-frontend loading method loadMicroApp from the new micro-frontend framework, Set the option information of the micro-frontend loading method loadMicroApp, including the name value name as container, the entry address value entry as the entry of the micro-frontend application, and the container value container as the id value of the corresponding div in html.

7. The micro-frontend construction device based on micro-module according to claim 5, characterized in that Micro frontends Use import-html-entry to load micromodules by loading modules, including: importHTML from import-html-entry, Asynchronously execute importHTML and get the function execScripts. Asynchronously execute the execScripts method to get the myModule definition.

8. According to the micro-module-based micro-frontend construction device of claim 5, characterized in that the micro-frontend Render the MyComponent component through the rendering module, including: Define the component name as MyComponent, The value of MyComponent in myModule is imported. Use vue's component component to render the MyComponent component.

Images