CN117827185A - Method, system, device and medium for generating micro front-end application page - Google Patents
Method, system, device and medium for generating micro front-end application page Download PDFInfo
- Publication number
- CN117827185A CN117827185A CN202311816838.3A CN202311816838A CN117827185A CN 117827185 A CN117827185 A CN 117827185A CN 202311816838 A CN202311816838 A CN 202311816838A CN 117827185 A CN117827185 A CN 117827185A
- Authority
- CN
- China
- Prior art keywords
- application
- base
- file
- base application
- sub
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 64
- 238000004806 packaging method and process Methods 0.000 claims abstract description 107
- 238000013507 mapping Methods 0.000 claims abstract description 39
- 230000003068 static effect Effects 0.000 claims description 34
- 238000004590 computer program Methods 0.000 claims description 12
- 230000001419 dependent effect Effects 0.000 claims description 8
- 230000001939 inductive effect Effects 0.000 claims description 8
- 230000004044 response Effects 0.000 claims description 8
- 238000007711 solidification Methods 0.000 claims description 4
- 230000008023 solidification Effects 0.000 claims description 4
- 230000007246 mechanism Effects 0.000 abstract description 5
- 238000012856 packing Methods 0.000 abstract 2
- 238000004891 communication Methods 0.000 description 11
- 238000010586 diagram Methods 0.000 description 8
- 230000006870 function Effects 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000003139 buffering effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Landscapes
- Stored Programmes (AREA)
Abstract
The application discloses a method, a system, a device and a medium for generating a micro front-end application page, which are used for obtaining a sub-application project file by uploading a base application packaging file to a content distribution network, packaging the sub-application project file through a micro front-end first plug-in, extracting base application dependencies contained in the base application packaging file, obtaining the sub-application packaging file containing a base application dependency mapping table, obtaining the base application packaging file from the content distribution network through a micro front-end second plug-in, dynamically referencing the base application dependency mapping table contained in the sub-application packaging file to load the base application packaging file, referencing the sub-application packaging file and generating the micro front-end application page. The method and the device can solve the problem of packing redundancy of the sub-applications and the base applications, optimize packing speed, fully utilize a caching mechanism of a browser and a content distribution network, avoid the problem of repeatedly loading the base applications by different sub-applications, and are widely applied to the field of webpage program development.
Description
Technical Field
The present invention relates to the field of web page program development, and in particular, to a method, a system, an apparatus, and a medium for generating a micro front end application page.
Background
The micro front end is a concept proposed by 2016 in ThoughtWorks Technology Radar: similar to the architecture concept of the server-side micro-service, a huge front-end application (megastone application) can be split into a plurality of independent and flexible small applications, each application can be independently developed, independently operated and independently deployed, and the small applications are combined into a single and complete application which is still seen by a user. Independent deployment, fully autonomous, loosely coupled are its core features.
The popular ways of generating micro front end application pages in the industry today have the following disadvantages:
1. the scheme based on iframe implementation: the problems of route loss, complex communication, white screen loading and the like exist.
2. Implementation scheme based on Web Components: the disadvantage is that the browser compatibility is slightly poor;
3. the implementation scheme based on the javascript module loader comprises the following steps: the disadvantage is that the modification amount of the existing application is large, the base component and the sub-component cannot be reused due to mutual dependence, and code redundancy is caused.
Disclosure of Invention
In order to solve at least one technical problem in the related art, the embodiments of the present application provide a method, a system, a device, and a medium for generating a micro front end application page, which aim to solve the problem of packaging redundancy of sub-applications and base applications, fully utilize caching mechanisms of a browser and a content distribution network, and avoid the problem of repeatedly loading the base applications by different sub-applications.
In one aspect, an embodiment of the present application proposes a method for generating a micro front end application page, where the method includes the following steps:
acquiring a base application package file;
uploading the base application package file to a content distribution network;
acquiring a sub-application project file;
introducing a base application plug-in corresponding to the base application packaging file into the sub application project file, packaging the sub application project file through a micro front end first plug-in, extracting base application dependencies contained in the base application packaging file, and obtaining a sub application packaging file containing a base application dependency mapping table; the base application dependency mapping table is a mapping table for recording dependent addresses referencing the base application plug-in and the base application dependency;
and acquiring the base application packaging file from the content distribution network through a micro front end second plug-in, dynamically referencing the base application dependency mapping table contained in the sub application packaging file to load the base application packaging file, and referencing the sub application packaging file to generate a micro front end application page.
In some embodiments, before performing the step of obtaining the base application package file, the method further comprises the steps of:
Constructing a base application project through Vue Cli to obtain a base application project file;
packaging the base application project file through a third plug-in unit at the micro front end to obtain the base application packaged file;
and publishing the base application packaging file to a npm source warehouse to obtain a base application plug-in corresponding to the base application packaging file.
In some embodiments, the method further comprises:
and updating the base application project file in response to the project update operation of the base application project, and obtaining an updated base application project file.
In some embodiments, the base application package file includes a base static resource file, and the step of uploading the base application package file to a content distribution network specifically includes:
and selecting a base application upgrading mode, and uploading the base static resource file contained in the base application packaging file corresponding to the base application project file to the content distribution network according to the base application upgrading mode.
In some embodiments, the step of introducing the base application plug-in corresponding to the base application package file into the sub-application project file, packaging the sub-application project file by using the micro front end first plug-in, and extracting the base application dependency included in the base application package file to obtain the sub-application package file including the base application dependency mapping table specifically includes:
And packaging the sub-application project files introduced into the base application plug-in through the micro front end first plug-in, and skipping the base application dependence introduced into the base application configuration file contained in the base application packaging file to generate the sub-application packaging file.
In some embodiments, the step of obtaining the base application package file from the content distribution network through the micro front end second plugin, dynamically referencing the base application dependency mapping table included in the sub application package file to load the base application package file, and referencing the sub application package file to generate a micro front end application page specifically includes:
acquiring the base static resource file from the content distribution network through the micro front end second plug-in, dynamically referencing the base static resource file in the micro front end application template by using a JavaScript method, loading the base static resource file by referencing the base application dependency mapping table contained in the sub application packaging file, and generating a micro front end base application in the micro front end application template;
and referring to the sub-application package file in the micro front end application template by using the JavaScript method through the micro front end second plug-in, loading the sub-application package file, and generating a micro front end terminal application in the micro front end application template which has generated the micro front end base application to obtain the micro front end application page.
In some embodiments, the base application upgrade mode is a base cure upgrade mode or a base non-sensitive upgrade mode, and when the step of obtaining the base application package file from the content distribution network through the micro front end second plug-in, dynamically referencing the base application dependency mapping table included in the sub application package file to load the base application package file, and referencing the sub application package file to generate a micro front end application page is performed, the method further includes the steps of:
when the base application upgrading mode is the base solidification upgrading mode, determining a base application version number in response to base application packaging file version number selection operation, and acquiring the base application packaging file corresponding to the base application version number from the content distribution network through the micro front end second plug-in;
when the base application upgrading mode is the base non-inductive upgrading mode, detecting whether the base application project is updated or not, and automatically acquiring a base application packaging updating file from the content distribution network through the micro front end second plug-in; and the base application packaging update file is the base application packaging file corresponding to the updated base application item.
On the other hand, the embodiment of the application provides a system for generating a micro front-end application page, which comprises:
the first module is used for acquiring a base application packaging file;
a second module for uploading the base application package file to a content distribution network;
a third module, configured to obtain a sub-application project file;
a fourth module, configured to introduce a base application plug-in corresponding to the base application package file into the sub-application project file, package the sub-application project file through a first plug-in at a micro front end, and extract a base application dependency included in the base application package file to obtain a sub-application package file including a base application dependency mapping table; the base application dependency mapping table is a mapping table for recording dependent addresses referencing the base application plug-in and the base application dependency;
and a fifth module, configured to obtain the base application package file from the content distribution network through a micro front end second plug-in, dynamically refer to the base application dependency mapping table included in the sub application package file to load the base application package file, and refer to the sub application package file to generate a micro front end application page.
On the other hand, the embodiment of the application provides a generating device of the micro front end application page, which comprises a memory and a processor, wherein the memory stores a computer program, and the processor realizes the generating method of the micro front end application page when executing the computer program.
In yet another aspect, embodiments of the present application provide a computer readable storage medium storing a computer program, where the computer program is executed by a processor to implement the foregoing method for generating a micro front end application page.
According to the method, the system, the device and the medium for generating the micro front end application page, the base application packaging file is obtained, the base application packaging file is uploaded to a content distribution network, the sub application project file is obtained, the base application dependence contained in the base application packaging file is extracted, the sub application packaging file containing the base application dependence mapping table is obtained, the base application packaging file is obtained from the content distribution network through the micro front end second plug-in, the base application dependence mapping table contained in the sub application packaging file is dynamically referenced to load the base application packaging file, the sub application packaging file is referenced, and the micro front end application page is generated. The method solves the problem of sub-application and base application packaging redundancy through mutual dependence between the ion extraction application and the base application, optimizes packaging speed, improves page performance, and can fully utilize a caching mechanism of a browser and a content distribution network by using a method for dynamically referencing the base application packaging file by a page, thereby avoiding the problem of repeated loading of the base application by different sub-applications.
Drawings
FIG. 1 is a flowchart of a method for generating a micro front end application page according to an embodiment of the present application;
FIG. 2 is another flowchart of a method for generating a micro front end application page according to an embodiment of the present application;
fig. 3 is a flowchart of step S105 in the embodiment of the present application;
FIG. 4 is another flowchart of a method for generating a micro front end application page according to an embodiment of the present application;
FIG. 5 is a flow chart of the introduction of a base application using a base cure upgrade mode in an embodiment of the present application;
FIG. 6 is a flow chart of the introduction of a base application using a base non-inductive upgrade mode in an embodiment of the present application;
FIG. 7 is a schematic diagram of a base application being introduced into a sub-application in an embodiment of the present application;
FIG. 8 is a schematic diagram of a micro front end system framework in an embodiment of the present application;
fig. 9 is a schematic structural diagram of a generating system of a micro front end application page according to an embodiment of the present application;
fig. 10 is a schematic hardware structure of a generating device of a micro front end application page according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be further described in detail with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.
It should be noted that although functional block division is performed in a device diagram and a logic sequence is shown in a flowchart, in some cases, the steps shown or described may be performed in a different order than the block division in the device, or in the flowchart. The terms first, second and the like in the description and in the claims and in the above-described figures, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order.
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the present application.
First, several nouns referred to in this application are parsed:
micro front end: similar to the architecture concept of the server-side micro-service, a huge front-end application (megastone application) can be split into a plurality of independent and flexible small applications, each application can be independently developed, independently operated and independently deployed, and the small applications are combined into a single and complete application which is still seen by a user. Independent deployment, fully autonomous, loosely coupled are its core features.
Webpack: weback is a code compilation tool with an entry, an exit, a loader, and a plug-in. weback is a static module packaging tool for modern JavaScript applications. When weback processes an application, it builds a dependency graph internally, which maps to each module required for an item and generates one or more bundles.
Vue framework: is a set of progressive frameworks for building user interfaces designed to be applied layer by layer from bottom to top. The core library of Vue only focuses on the view layer, not only is easy to handle, but also facilitates integration with third party libraries (e.g., vue-router: skip, vue-resource: communication, vuex: management) or existing projects.
ES6: ECMAScript 6 (abbreviated as ES 6) is a standard of JavaScript language formally issued in month 6 of 2015, and formally named ECMAScript 2015 (ES 2015). Its goal is to make JavaScript language available for writing complex large-scale applications, becoming an enterprise-level development language.
CDN: content Delivery Network, content distribution network. The basic idea is to avoid the bottleneck and link on the internet which possibly affects the data transmission speed and stability as much as possible, so that the content is transmitted faster and more stably. Through a layer of intelligent virtual network formed by node servers placed everywhere in the network and based on the existing internet, the CDN system can redirect the user's request to the service node nearest to the user in real time according to the network flow and the comprehensive information of the connection of each node, the load condition, the distance to the user, the response time and the like. The method aims to enable the user to obtain the required content nearby, solve the problem of congestion of the Internet network and improve the response speed of the user for accessing the website.
HTML：
Currently, the micro front end implementation that is popular in the industry has the following disadvantages:
1. the scheme based on iframe implementation: the problems of route loss, complex communication, white screen loading and the like exist.
2. Implementation scheme based on Web Components: the disadvantage is that the browser compatibility is slightly poor;
3. the implementation scheme based on the javascript module loader comprises the following steps: the disadvantage is that the modification amount of the existing application is large, the base component and the sub-component cannot be reused due to mutual dependence, and code redundancy is caused.
Based on this, the embodiment of the application provides a method, a system, a device and a medium for generating a micro front-end application page, which aim to solve the problem of package redundancy of sub-applications and base applications, fully utilize a caching mechanism of a browser and a content distribution network, and avoid the problem of repeated loading of the base applications by different sub-applications.
Referring to fig. 1, fig. 1 is an optional flowchart of a method for generating a micro front end application page according to an embodiment of the present application, where the method may include, but is not limited to, steps S101 to S105:
step S101, obtaining a base application packaging file;
step S102, uploading a base application package file to a content distribution network;
step S103, obtaining a sub application project file;
Step S104, introducing a base application plug-in corresponding to the base application packaging file into the sub-application project file, packaging the sub-application project file through the micro front end first plug-in, extracting the base application dependence contained in the base application packaging file, and obtaining the sub-application packaging file containing the base application dependence mapping table;
step S105, obtaining a base application packaging file from the content distribution network through the micro front end second plug-in, loading the base application packaging file by dynamically referencing a base application dependency mapping table contained in the sub application packaging file, and referencing the sub application packaging file to generate a micro front end application page.
In some embodiments, before performing step S101, referring to fig. 2, the method may further include steps S201 to S203:
step S201, constructing a base application project through Vue Cli, and obtaining a base application project file;
step S202, packaging the base application project file through a third plug-in unit at the micro front end to obtain a base application packaged file;
in step S203, the base application package file is published to the npm source repository, and a base application plug-in corresponding to the base application package file is obtained.
In step S201 of some embodiments, a Vue2 frame project is created using a Vue-cli scaffold, with a Base application project name exemplified by Base. The class of class II is exposed externally, and the class II contains the install method. The options parameters of the instrument method are object types, and comprise three keys of pages, modules and tracker.
The Base class functions as follows:
1. a UI library is introduced. The ElementUI component library is introduced using vue.
2. Global data layer. Introducing a Vuex data stream, creating a global store, acquiring and storing information such as user identity, menu and the like, and exposing the information to the sub-application; the sub-application passes the store of the sub-application to the Base class through the modules parameter in the options parameter and merges into the global store.
3. And (5) setting a route. A Vue-Router library is introduced. The sub-application passes the route of the sub-application to the Base class through the pages parameter in the options parameter. And creating a route daemon function by the Base class, judging whether the user has the page access authority according to the user authority and the route corresponding relation stored in the global store when the route is changed, and uniformly jumping to 403 pages for unauthorized access.
4. Introduction of http encrypted communication security component, exposing to sub-application use by adding method on Vue prototype
5. And introducing a buried point statistics component, and judging whether to start according to the tracker parameter in the options parameters transmitted by the sub-application.
6. And introducing public modules such as head and tail, side bars, global bulletin windows and the like, and displaying corresponding menus according to the corresponding relation between the user rights and the menus in the global store.
The Base class externally exposed module comprises: router, store (global store), comp (comprising common module and sub-application business module), is used by the sub-application when instantiating the page level Vue component.
In step S202 of some embodiments, optionally, a weback. Dlllplug in plug-in (micro front end third plug-in) is added to the plug-in configuration item of the weback configuration file of the Base project (Base application project) to construct a dynamic link library.
The path and name parameters of the dllupin plug-in (micro front end third plug-in) are configured, the path is the file name describing the output of the manifest. Json file of the dynamic link library, the name is the global variable value in the manifest. Json file, the value of the output. Library in the weback configuration needs to be kept consistent, and the path can be configured as [ name ], namely the entry value is taken.
After the Base application project file is packaged by using the npm run build command in combination with the weback.
In step S203 of some embodiments, a version number of a base application item is configured in a package.json file included in the base application package file, and an npm publish command is executed to submit the base application package file to an internal npm source repository of Vue, to generate a corresponding base application plug-in.
In step S102 of some embodiments, the base application package file includes a base static resource file, specifically, a base application upgrade mode is selected, and according to the base application upgrade mode, the base static resource file (including a CSS file, a JS file, and other static resource files) included in the base application package file corresponding to the base application project file is uploaded to the content delivery network CDN.
In step S103 of some embodiments, a Vue2 framework item is created using a Vue-cli scaffold, and a sub-application item name is App as an example, and a sub-application item is built in an ES6 Module manner, so as to obtain a corresponding sub-application item file.
In step S104 of some embodiments, the base application dependency mapping table is a mapping table that records related dependent addresses referencing the base application plug-in and base application dependencies.
Specifically, a Base module (Base application package file) is introduced into a main.js file contained in the sub-application project file, and a Base plug-in (Base application plug-in) is accessed into the sub-application project by using a vue.
Using a vue.use (Base) method, a specific process flow of accessing a Base plug-in a sub-application item is as follows:
And transmitting the application route of the child into the page parameters of the options. And the sub application store data layer is transmitted through the modules module of the options. Selecting on/off buried point statistics through the tracker parameters of the options;
by means of a Vue.prototype $ http method, an http encryption communication security component provided by a Base application item is used for replacing an http module of a sub application item, such as axios;
acquiring a router module exposed to a Base class through the Base. Router, setting a life cycle function, for example, dynamically setting a current page title according to a title field of a route meta parameter;
when the page level Vue object is instantiated, a base.store is input in the store parameter, a base.router is input in the router parameter, and a render method is used for rendering topbar, codebar, components and other public modules and service modules provided by the base.comp.
Optionally, after the Base plug-in is accessed in the sub-application project, a weback.dllreference plug-in (micro front end first plug-in) is used for packaging, and when the sub-application project is packaged, the sub-application project file which is introduced into the Base application configuration file is packaged according to a manifest.json file (Base application configuration file) in the Base application packaging file which is introduced into the sub-application project file, and the Base application dependence which is introduced into the Base application configuration file contained in the Base application packaging file is skipped, so that the sub-application packaging file is generated.
The CSS/JS file contained in the sub-application package file obtained after the package does not contain the base application code part, and only contains the base application dependency mapping table.
The Webpack.dllrreferring plug-in has the function of excluding the Base application itself and the dependence introduced by the Base when the packaging is executed, avoiding version solidification and redundant packaging, and improving the packaging speed.
In some embodiments, referring to fig. 3, fig. 3 is an alternative flowchart of step S105 in embodiments of the present application, wherein step S105 may include, but is not limited to, steps S301 to S302:
step S301, a base static resource file is obtained from a content distribution network through a micro front end second plug-in, the base static resource file is dynamically referenced in a micro front end application template by using a JavaScript method, a base application dependency mapping table contained in a sub application packaging file is referenced to load the base static resource file, and a micro front end base application is generated in the micro front end application template;
step S302, a sub application package file is referenced in a micro front end application template by a JavaScript method through a micro front end second plug-in, and loaded, and a micro front end terminal application is generated in the micro front end application template of the generated micro front end base application, so that a micro front end application page is obtained.
In step S301 of some embodiments, optionally, the micro front end application template is an HTML template of a sub-application, and the micro front end second plug-in is an aeppasehtml plug-in developed based on HTML weback plug in.
The AepBaseHtmlPocesSingPlugin is a weback plugin developed based on the HtmlWebpackPlugin, and the main function is to insert a CSS/JS file (Base static resource file) packaged by a Base application in an html template of a sub-application.
The AepBaseHtmlPocesSingPlugin uses a document. Write mode to dynamically write link labels and script labels, and is different from a common mode that directly uses link labels to introduce CSS files and script labels to introduce JS files, so that the method has two advantages:
(1) the CDN addresses corresponding to different environments of the Base static resource file are different, and the static tag writing method requires that the back-end service outputs the CDN addresses of different environments in a mode of configuring environment variables and using template variables. The dynamic writing mode does not depend on the back-end service, the current environment can be judged through the front end, and the CDN address of the corresponding environment is set.
(2) The Base static resource file is accessed by the browser, and is cached by the browser due to the http cache policy set by the CDN. The subsequent Base static resource file is updated on the CDN, but if the access address in the browser is unchanged, the cached file is preferentially read instead of the latest file. In this case, the update is generally achieved by setting a timestamp (version number), and after the CDN file is updated, modifying the timestamp (version number) of the file reference address in html. However, introducing the same base application scenario to multiple sub-applications, updating the timestamp (version number) is cumbersome, often requiring back-end cross-application read configuration or cache buffering. The dynamic label writing mode can avoid the trouble, the front end controls the time stamp updating time, and the base application upgrading scheme is introduced later to introduce a specific time stamp (version number) updating mode related to the service.
The JS files in the base static resource file are loaded before the sub-application JS files, exposing the self module and the dependent module. When the sub-application JS loads, a dependent base application module address is found according to the base application dependency mapping table, and the address is consistent with the self module exposed by the base application and the dependent module address, so that codes of corresponding modules are loaded, and the introduction of the base application and the combination of the subsequent base application and the sub-application are completed.
In some embodiments, the method for generating the micro front end application page further includes the steps of:
and updating the base application project file in response to the project update operation of the base application project, and obtaining the updated base application project file.
In some embodiments, the base application project update, i.e., the base application upgrade. The specific flow of the base application upgrade is as follows:
after the Base application code is changed, updating a Base application project file, modifying version numbers in packages included in the Base application project file, obtaining updated Base application project files, packaging and releasing the Base application project files into a npm source warehouse, and uploading the Base application packaged files into a CDN;
In a CDN, a version number is updated by a Base static resource file (Base static resource file), version number acquisition logic is related to a service, specifically, an interface provided by an AEP platform (an Internet of things platform where a Base application and a sub-application are located) is called to read a configuration file contained in the Base static resource file, a version number field is added in the configuration file, after CDN content is updated, the field is modified, for example, a Base application version is updated from 1.0.0 to 1.1.0, a Base version field value in configuration is changed from 1.0 to 1.1.0, and dynamic release is performed through a configuration management platform such as a nacos;
the baseVersion field stored to the browser's local cache. When the browser loads the sub-application page and dynamically writes link labels and script labels by a document. Write method, the latest version of the base application item is read from the local cache of the browser and spliced to the CDN address, for example, https:// static. A. Com/base. Js version=1.1.0. Assuming that the browser has cached https:// static. A. Com/base. Jsversion=1.0.0 the base. Js acquired by the path, the new CDN address is different from the address cached before, the browser discards the local http cache and initiates a new request, thereby realizing the effect of refreshing the http cache of the static resource file.
In the upgrading process of the base application, the sub-application does not need any change, so that the non-inductive upgrading of the base application is realized.
In some embodiments, the base application upgrade mode is a base cure upgrade mode or a base sensorless upgrade mode, referring to fig. 4, in performing step S105, the above method may further include, but is not limited to, steps S401 to S402:
in step S401, when the base application upgrade mode is the base cure upgrade mode, the base application version number is determined in response to the base application package file version number selection operation, and the base application package file corresponding to the base application version number is obtained from the content distribution network through the micro front end second plug-in.
Step S402, when the base application upgrading mode is a base non-inductive upgrading mode, detecting whether a base application project is updated, and automatically acquiring a base application packaging updating file from a content distribution network through a micro front end second plug-in; the base application packaging update file is a base application packaging file corresponding to the updated base application project.
In some embodiments, referring to fig. 5, fig. 5 is an optional flowchart of the introduction of a base application using a base cure upgrade mode in an embodiment of the present application, where steps 01 to 10 are included:
Step 01, base application modification;
step 02, modifying Version number in the base application project file;
step 03, packaging the base application project file by using weback;
step 04, publishing the base application packaging file to a npm warehouse;
step 05, uploading the base application package file to the CDN;
step 06, the sub-application updates the base application plugin in the npm repository;
step 07, sub-application packaging;
step 08, modifying the static resource file path of the base introduced in the sub-application HTML template;
step 09, publishing the sub-application;
and step 10, finishing upgrading.
In some embodiments, referring to fig. 6, fig. 6 is an optional flowchart for introducing a base application by applying a base non-inductive upgrade mode in an embodiment of the present application, where steps a to M are included:
step A, base application modification;
step B, modifying the Version number in the base application project file;
step C, packaging the base application project file by using the weback;
step D, publishing the base application packaging file to a npm warehouse;
step E, uploading the base application package file to the CDN, and modifying the Version configuration of the base application package file in the CDN;
step F, the AEP platform interface obtains Version;
Step G, storing Version to a browser localStorage;
step H, redirecting to the sub-application;
step I, reading Version stored in a browser localStorage;
step J, splicing Version to CDN address of the static resource file of the base;
step K, loading a static resource file of the base into the sub-application page by the browser, and updating a browser cache;
and step L, finishing upgrading.
In some embodiments, referring to fig. 7, fig. 7 is an optional schematic diagram of a base application introduced into a sub-application in the embodiment of the present application, where a dllblupin plug-in (micro front end third plug-in) is used to package the base application, obtain a base application display file (base static resource file) and a manifest.json file (base application configuration file), upload the base application display file to a CDN, introduce the manifest.json file into the sub-application, package the sub-application through a dllbreferenceplug-in (micro front end first plug-in) to obtain a sub-application display file, dynamically write a link tag and a script tag through an aeppasehmpoinsin plug-in (micro front end second plug-in) in a base non-inductive upgrade mode, obtain and introduce the base application display file into the CDN, and generate an HTML template from the base application display file through the base application display tag and the micro front end plug-in.
In some embodiments, referring to fig. 8, fig. 8 is an optional schematic diagram of a micro front-end system framework in an embodiment of the present application, where the optional schematic diagram includes a base framework Vue 2, a base application, a sub-application, a compilation layer, a server API, and a browser, where the sub-application includes pages and common components.
Referring to fig. 9, fig. 9 is an optional structural schematic diagram of a generating system of a micro front end application page according to an embodiment of the present application, where the system includes:
the first module is used for acquiring a base application packaging file;
the second module is used for uploading the base application packaging file to the content distribution network;
a third module, configured to obtain a sub-application project file;
a fourth module, configured to introduce a base application plug-in corresponding to the base application package file into the sub-application project file, package the sub-application project file through the micro front end first plug-in, and extract the base application dependency included in the base application package file to obtain a sub-application package file including a base application dependency mapping table; the base application dependency mapping table is a mapping table for recording relevant dependency addresses referencing the base application plug-in and base application dependencies;
and a fifth module, configured to obtain, through the micro front end second plug-in, a base application package file from the content distribution network, dynamically reference a base application dependency mapping table included in the sub-application package file to load the base application package file, and reference the sub-application package file to generate a micro front end application page.
The specific implementation of the system for generating the micro front-end application page is basically the same as the specific embodiment of the method for generating the micro front-end application page, and will not be described herein.
The embodiment of the application also provides a generating device of the micro front-end application page, which comprises a memory and a processor, wherein the memory stores a computer program, and the processor realizes the generating method of the micro front-end application page when executing the computer program. The generating device of the micro front-end application page can be any intelligent terminal including a tablet personal computer, a vehicle-mounted computer and the like.
Referring to fig. 10, fig. 10 illustrates a hardware structure of a generating device of a micro front end application page according to another embodiment, where the generating device of the micro front end application page includes:
the processor 901 may be implemented by a general purpose CPU (central processing unit), a microprocessor, an application specific integrated circuit (ApplicationSpecificIntegratedCircuit, ASIC), or one or more integrated circuits, etc. for executing related programs to implement the technical solutions provided by the embodiments of the present application;
the memory 902 may be implemented in the form of read-only memory (ReadOnlyMemory, ROM), static storage, dynamic storage, or random access memory (RandomAccessMemory, RAM). The memory 902 may store an operating system and other application programs, and when the technical solution provided in the embodiments of the present application is implemented by software or firmware, relevant program codes are stored in the memory 902, and the processor 901 invokes a method for generating a micro front end application page to execute the embodiments of the present application;
An input/output interface 903 for inputting and outputting information;
the communication interface 904 is configured to implement communication interaction between the device and other devices, and may implement communication in a wired manner (e.g. USB, network cable, etc.), or may implement communication in a wireless manner (e.g. mobile network, WIFI, bluetooth, etc.);
a bus 905 that transfers information between the various components of the device (e.g., the processor 901, the memory 902, the input/output interface 903, and the communication interface 904);
wherein the processor 901, the memory 902, the input/output interface 903 and the communication interface 904 are communicatively coupled to each other within the device via a bus 905.
The embodiment of the application also provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the computer program realizes the generation method of the micro front end application page when being executed by a processor.
The memory, as a non-transitory computer readable storage medium, may be used to store non-transitory software programs as well as non-transitory computer executable programs. In addition, the memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, the memory optionally includes memory remotely located relative to the processor, the remote memory being connectable to the processor through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.
According to the method, the system, the device and the medium for generating the micro front end application page, the base application packaging file is obtained, the base application packaging file is uploaded to a content distribution network, the sub application project file is obtained, the sub application project file is packaged through the micro front end first plug-in, the base application dependence contained in the base application packaging file is extracted, the sub application packaging file containing the base application dependence mapping table is obtained, the base application packaging file is obtained from the content distribution network through the micro front end second plug-in, the base application packaging file is loaded by dynamically referencing the base application dependence mapping table contained in the sub application packaging file, and the sub application packaging file is referenced, so that the micro front end application page is generated. The method solves the problem of sub-application and base application packaging redundancy through mutual dependence between the ion extraction application and the base application, optimizes packaging speed, improves page performance, and can fully utilize a caching mechanism of a browser and a content distribution network by using a method for dynamically referencing the base application packaging file by a page, thereby avoiding the problem of repeated loading of the base application by different sub-applications.
The embodiments described in the embodiments of the present application are for more clearly describing the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application, and as those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are equally applicable to similar technical problems.
It will be appreciated by those skilled in the art that the technical solutions shown in the figures do not constitute limitations of the embodiments of the present application, and may include more or fewer steps than shown, or may combine certain steps, or different steps.
Preferred embodiments of the present application are described above with reference to the accompanying drawings, and thus do not limit the scope of the claims of the embodiments of the present application. Any modifications, equivalent substitutions and improvements made by those skilled in the art without departing from the scope and spirit of the embodiments of the present application shall fall within the scope of the claims of the embodiments of the present application.
Claims (10)
1. The method for generating the micro front-end application page is characterized by comprising the following steps of:
acquiring a base application package file;
uploading the base application package file to a content distribution network;
Acquiring a sub-application project file;
introducing a base application plug-in corresponding to the base application packaging file into the sub application project file, packaging the sub application project file through a micro front end first plug-in, extracting base application dependencies contained in the base application packaging file, and obtaining a sub application packaging file containing a base application dependency mapping table; the base application dependency mapping table is a mapping table for recording dependent addresses referencing the base application plug-in and the base application dependency;
and acquiring the base application packaging file from the content distribution network through a micro front end second plug-in, dynamically referencing the base application dependency mapping table contained in the sub application packaging file to load the base application packaging file, and referencing the sub application packaging file to generate a micro front end application page.
2. The method for generating a micro front-end application page according to claim 1, wherein before the step of obtaining the base application package file is performed, the method further comprises the steps of:
constructing a base application project through Vue Cli to obtain a base application project file;
Packaging the base application project file through a third plug-in unit at the micro front end to obtain the base application packaged file;
and publishing the base application packaging file to a npm source warehouse to obtain a base application plug-in corresponding to the base application packaging file.
3. The method for generating the micro front-end application page according to claim 2, wherein the method further comprises:
and updating the base application project file in response to the project update operation of the base application project, and obtaining an updated base application project file.
4. The method of generating micro front-end application pages according to claim 3, wherein the base application package file comprises a base static resource file, the step of uploading the base application package file to a content distribution network,
the method specifically comprises the following steps:
and selecting a base application upgrading mode, and uploading the base static resource file contained in the base application packaging file corresponding to the base application project file to the content distribution network according to the base application upgrading mode.
5. The method for generating the micro front end application page according to claim 1, wherein the step of introducing the base application plug-in corresponding to the base application package file into the sub application project file, packaging the sub application project file through the micro front end first plug-in, extracting base application dependencies contained in the base application package file, and obtaining the sub application package file containing the base application dependency mapping table specifically includes:
And packaging the sub-application project files introduced into the base application plug-in through the micro front end first plug-in, and skipping the base application dependence introduced into the base application configuration file contained in the base application packaging file to generate the sub-application packaging file.
6. The method for generating a micro front-end application page according to claim 4, wherein the step of obtaining the base application package file from the content distribution network through the micro front-end second plug-in, dynamically referencing the base application dependency map table included in the sub application package file to load the base application package file, and referencing the sub application package file to generate the micro front-end application page specifically comprises:
acquiring the base static resource file from the content distribution network through the micro front end second plug-in, dynamically referencing the base static resource file in the micro front end application template by using a JavaScript method, loading the base static resource file by referencing the base application dependency mapping table contained in the sub application packaging file, and generating a micro front end base application in the micro front end application template;
And referring to the sub-application package file in the micro front end application template by using the JavaScript method through the micro front end second plug-in, loading the sub-application package file, and generating a micro front end terminal application in the micro front end application template which has generated the micro front end base application to obtain the micro front end application page.
7. The method for generating a micro-front-end application page according to claim 4, wherein the base application upgrade mode is a base solidification upgrade mode or a base non-inductive upgrade mode, and when the step of obtaining the base application package file from the content distribution network through the micro-front-end second plug-in, dynamically referencing the base application dependency map table included in the sub-application package file to load the base application package file, and referencing the sub-application package file to generate the micro-front-end application page is performed, the method further comprises the steps of:
when the base application upgrading mode is the base solidification upgrading mode, determining a base application version number in response to base application packaging file version number selection operation, and acquiring the base application packaging file corresponding to the base application version number from the content distribution network through the micro front end second plug-in;
When the base application upgrading mode is the base non-inductive upgrading mode, detecting whether the base application project is updated or not, and automatically acquiring a base application packaging updating file from the content distribution network through the micro front end second plug-in; and the base application packaging update file is the base application packaging file corresponding to the updated base application item.
8. A system for generating a micro front-end application page, the system comprising:
the first module is used for acquiring a base application packaging file;
a second module for uploading the base application package file to a content distribution network;
a third module, configured to obtain a sub-application project file;
a fourth module, configured to introduce a base application plug-in corresponding to the base application package file into the sub-application project file, package the sub-application project file through a first plug-in at a micro front end, and extract a base application dependency included in the base application package file to obtain a sub-application package file including a base application dependency mapping table; the base application dependency mapping table is a mapping table for recording dependent addresses referencing the base application plug-in and the base application dependency;
And a fifth module, configured to obtain the base application package file from the content distribution network through a micro front end second plug-in, dynamically refer to the base application dependency mapping table included in the sub application package file to load the base application package file, and refer to the sub application package file to generate a micro front end application page.
9. A device for generating a micro front-end application page, wherein the device comprises a memory and a processor, the memory stores a computer program, and the processor implements the method for generating the micro front-end application page according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium storing a computer program, wherein the computer program when executed by a processor implements the method of generating micro front-end application pages of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311816838.3A CN117827185A (en) | 2023-12-26 | 2023-12-26 | Method, system, device and medium for generating micro front-end application page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311816838.3A CN117827185A (en) | 2023-12-26 | 2023-12-26 | Method, system, device and medium for generating micro front-end application page |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117827185A true CN117827185A (en) | 2024-04-05 |
Family
ID=90520423
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311816838.3A Pending CN117827185A (en) | 2023-12-26 | 2023-12-26 | Method, system, device and medium for generating micro front-end application page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117827185A (en) |
-
2023
- 2023-12-26 CN CN202311816838.3A patent/CN117827185A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110990731B (en) | Rendering method, device and equipment of static webpage and computer storage medium | |
| US10318318B2 (en) | Extending user interface of a web console | |
| CN111680253B (en) | Page application data packet generation method and device, computer equipment and storage medium | |
| CN111740948B (en) | Data packet issuing method, dynamic updating method, device, equipment and medium | |
| CN112114890A (en) | Method, device and equipment for processing small program and storage medium | |
| Konshin | Next. js Quick Start Guide: Server-side rendering done right | |
| CN113761412A (en) | Application page display method and device, electronic equipment, medium and application system | |
| CN116719523A (en) | Page rendering method and electronic device | |
| CN101876998B (en) | Method and system for editing data | |
| CN116431155A (en) | Front-end application construction method, medium, device and computing equipment | |
| CN111459497A (en) | WebPack-based resource package compiling method, system, server and storage medium | |
| CN113157274A (en) | Software development method and device based on micro front end, electronic equipment and storage medium | |
| CN116166907B (en) | Method and device for developing Web application by using WebAsssembly and service page compiling technology | |
| CN112632425A (en) | Method, device, equipment and storage medium for generating offline resource file | |
| CN115729604A (en) | Micro application integration method, system, electronic device and storage medium | |
| CN117827185A (en) | Method, system, device and medium for generating micro front-end application page | |
| US9680967B2 (en) | Method of using application, gateway using the method, terminal using the method, and terminal system using the method | |
| US20140304690A1 (en) | Systems and Methods for Outputting an Application to Another Environment | |
| CN115525305A (en) | Data processing method, application starting method, device, computer equipment and storage medium | |
| CN113469740A (en) | Advertisement data acquisition method, device, equipment and storage medium | |
| CN113498512A (en) | Optimization method and device for vehicle-mounted image display, computer equipment and storage medium | |
| Phang | Mastering Front-End Web Development (HTML, Bootstrap, CSS, SEO, Cordova, SVG, ECMAScript, JavaScript, WebGL, Web Design and many more.): 14 Books in 1. Introducing 200+ Extensions. An Advanced Guide. | |
| CN111241538B (en) | Method, device, medium and electronic equipment for protecting node object variable | |
| KR20110103888A (en) | System for accessing and sharing user defined contents and method of the same | |
| KR101288845B1 (en) | System for processing Multi mobile service and method therefor |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |