Micro-front-end route scheduling method, device, system, equipment and medium

Abstract

The invention discloses a micro-front-end routing scheduling method, device, system and equipment and a medium. The method comprises the following steps: dynamically acquiring an AMD resource address and a URL of an iframe sub-application; realizing sandboxed operation of the AMD module through a window namespace object, and sharing a public library based on a global dependency mapping table; the iframe dynamically isolates the operation environment; a path-to-regexp is adopted to compile a routing rule, and an AMD module or an iframe sub-application is dynamically scheduled to be loaded according to a routing matching result; and establishing a bidirectional communication channel between the main frame and the iframe sub-application, and transmitting data and instruction messages through an event bus and a PostMessage protocol. According to the method, the key technical problems of coexistence of multiple technical stacks, dynamic module loading, cross-application communication and the like in the micro-front-end architecture can be solved, and the modularization degree and the performance during operation are improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a micro-front-end routing scheduling method, device, system, equipment and medium. Background Art

[0002] At present, with the support of micro-frontend technology, the front-end projects of large enterprises can enable multiple teams to develop different sub-applications, and finally aggregate them into a large system, which greatly improves development efficiency and system scalability.

[0003] However, when enterprises integrate existing front-end applications, varying architectures and technical debt often necessitate deep code modifications. To maintain system stability, enterprise micro-front-end systems often only integrate newly developed applications, while previously developed applications must still be managed separately. Furthermore, even with the high cost of retrofitting previously developed applications, the micro-front-end sandbox mechanism can cause memory leaks and module loading failures, impacting the original application's code size and performance, making it difficult to achieve out-of-the-box functionality. Summary of the Invention

[0004] Based on the problems described in this background technology, the present invention proposes a micro-frontend routing scheduling method, apparatus, system, device, and medium, aiming to address the problems of high code modification costs, unstable sandbox mechanisms, and incomplete environmental isolation in existing micro-frontend technologies. The core concept of this invention is to achieve seamless integration and secure operation of micro-frontend sub-applications through a dynamic routing scheduling mechanism, combined with AMD module sandboxing and iframe environment isolation. The technical solution is as follows:

[0005] In a first aspect, the present invention provides a micro-frontend routing scheduling method, comprising: Step S1: Dynamically obtain the resource address, and dynamically obtain the AMD resource address of the micro-frontend module and the URL address of the iframe sub-application through the configuration interface; Step S2: AMD module sandboxing. For AMD standard modules, the module operation sandboxing is implemented by rewriting the custom property registration mechanism of the window object, and the common library is shared based on the global dependency mapping table; Step S3: Dynamically isolate the iframe, create an iframe container with isolation parameters for the sub-application, and dynamically generate a URL with a sandbox identifier to isolate the running environment; Step S4: Unify routing scheduling, use path-to-regexp to compile routing rules, and dynamically schedule AMD module loading or iframe sub-application loading according to routing matching results.

[0006] In one embodiment, dynamically obtaining a resource address includes: S1.1: During the routing guard interception phase, dynamically create a script tag to load the AMD module JS and a style tag to load the CSS; S1.2: Reuse the common dependency library of AMD modules through the preset module alias mapping table; S1.3: Generate an iframe URL parameter that carries the isolated session ID to ensure the isolation of the sub-application environment.

[0007] In one embodiment, the unified routing scheduling includes: S4.1: Register the routing configuration set, including AMD module routing rules and iframe sub-application routing rules; S4.2: Compile routing rules into matching regular expressions through path-to-regexp; S4.3: Based on the routing request hit result, execute the AMD module to load or create an iframe container on demand.

[0008] In one embodiment, the method further comprises: Step S5: Cross-domain communication linkage, establishing a two-way communication channel between the main frame and the iframe sub-application, delivering structured data through the event bus, or transmitting instruction messages through the PostMessage protocol.

[0009] In a second aspect, the present invention provides a micro-frontend routing scheduling device, comprising: The routing dispatch center is used to integrate path-to-regexp to implement routing rule compilation and trigger the loading of AMD modules or iframe sub-applications based on the matching type; Sandbox execution engine, used to parse AMD modules and implement sandboxing and dependency sharing through the window object property rewriting mechanism; Isolation container manager, used to dynamically generate iframe URLs with isolation parameters and manage the lifecycle of iframe instances; Resource loader, used to load JS or CSS resources of AMD modules on demand and reuse common libraries through dependency mapping tables; The communication coordinator is used to handle the event bus and PostMessage protocol communication between the main frame and the iframe sub-application.

[0010] In a third aspect, the present invention provides a micro-frontend routing scheduling system, comprising: Configuration repository, used to store module resource addresses, routing rules, and dependency mapping tables; The micro-frontend routing scheduling device as described above; The security sandbox layer implements operation isolation by combining the window attribute isolation mechanism of the sandbox execution engine and the iframe environment of the isolation container manager.

[0011] In a fourth aspect, the present invention further provides an electronic device, comprising: a processor and a memory, wherein the memory stores executable instructions, and when the processor executes the instructions, the method in any one of the above-mentioned embodiments is implemented.

[0012] In a fifth aspect, the present invention further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the method in any one of the above-mentioned embodiments is implemented.

[0013] The technical solution of the present invention can achieve:

[0014] 1. Unified routing scheduling: Use path-to-regexp to compile routing rules, dynamically schedule AMD module loading or iframe sub-application loading according to routing matching results, and achieve flexible routing management.

[0015] 2. AMD module sandboxing: For AMD specification modules, the custom property registration mechanism of the window object is rewritten to achieve sandboxed operation of the module. At the same time, the common library is shared based on the global dependency mapping table to avoid repeated loading and memory leaks.

[0016] 3. iframe dynamic isolation: Create an iframe container with isolation parameters for the sub-application and dynamically generate a unique URL to ensure complete isolation of the sub-application running environment and avoid global pollution.

[0017] 4. Dynamic resource acquisition and loading: Dynamically obtain the AMD resource address of the micro-frontend module and the URL address of the iframe sub-application through the configuration interface to achieve on-demand loading and efficient management of resources.

[0018] 5. Cross-domain communication linkage: Establish a two-way communication channel between the main framework and the iframe sub-application, and transmit structured data or command messages through the event bus or PostMessage protocol to ensure efficient collaboration in a cross-domain environment.

[0019] Compared with the prior art, the micro-frontend routing scheduling method and system of the present invention have the following beneficial effects:

[0020] Low-intrusion: Rapid integration is possible without deep modification of existing sub-applications.

[0021] High isolation: Through the dual isolation mechanism of AMD sandboxing and iframe, the problem of environmental conflicts is completely resolved.

[0022] Flexible scheduling: Dynamic routing scheduling supports multiple sub-application types and adapts to complex business scenarios.

[0023] Performance optimization: Dependency sharing and on-demand loading mechanisms effectively reduce resource redundancy and improve system performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] The specific embodiments of the present invention are described in detail below with reference to the accompanying drawings. It should be noted that the accompanying drawings are for illustrative purposes only and should not be construed as limiting the present invention.

[0025] Figure 1 This is a flowchart of the micro-frontend routing scheduling method of the present invention.

[0026] Figure 2 This is a specific flow chart of the micro-frontend routing scheduling method described in the present invention.

[0027] Figure 3 This is a schematic diagram of cross-domain communication linkage.

[0028] Figure 4 This is a structural block diagram of the micro-frontend routing scheduling system of the present invention. DETAILED DESCRIPTION

[0029] The following will provide a clear and complete description of the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only some of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts are within the scope of protection of the present invention.

[0030] See also Figure 1 , Figure 1 It is a flow chart of the micro-front-end routing scheduling method of the present invention.

[0031] In a first aspect, the present invention provides a micro-frontend routing scheduling method, comprising: Step S1: Dynamically obtain the resource address, and dynamically obtain the AMD resource address of the micro-frontend module and the URL address of the iframe sub-application through the configuration interface; Step S2: AMD module sandboxing. For AMD standard modules, the module operation sandboxing is implemented by rewriting the custom property registration mechanism of the window object, and the common library is shared based on the global dependency mapping table; Step S3: Dynamically isolate the iframe, create an iframe container with isolation parameters for the sub-application, and dynamically generate a URL with a sandbox identifier to isolate the running environment; Step S4: Unify routing scheduling, use path-to-regexp to compile routing rules, and dynamically schedule AMD module loading or iframe sub-application loading according to routing matching results; Step S5: Cross-domain communication linkage, establishing a two-way communication channel between the main frame and the iframe sub-application, delivering structured data through the event bus, or transmitting instruction messages through the PostMessage protocol.

[0032] Example 1: Dynamically obtain resource address 1.1、Route Guard Interception: Figure 2 The detailed flowchart of the micro-frontend routing method shows the complete process from dynamically obtaining resource addresses to unified routing scheduling. Before the route jump, the routing guard "beforeEach" intercepts the request, dynamically creates a script tag to load the JS resource of the AMD module, and simultaneously creates a style tag to load the CSS resource. The loading status of the sub-application is recorded to avoid duplicate module loading.

[0033] 1.2. Module alias mapping: Through the preset module alias mapping table, the common dependency library of the micro front-end framework is reused to avoid repeated loading.

[0034] 1.3. Iframe URL generation: Generate an iframe URL parameter with a unique isolated session ID for the sub-application to ensure the independence of the sub-application running environment.

[0035] Example 2: AMD module sandboxing 2.1. Mount to the window namespace object: Unify the management of AMD modules and implement sandboxed operation of AMD modules.

[0036] 2.2. Dependency mapping table: Maintain a global dependency mapping table, share common libraries, and ensure the consistency of dependencies between modules.

[0037] 2.3. Modular routing and status: vue-router and vuex are independently encapsulated to facilitate data access.

[0038] Example 3: iframe dynamic isolation 3.1. Create an iframe container: Dynamically create an iframe container based on the sub-application's route matching results and generate a URL with an identifier.

[0039] 3.2. Environment isolation: Use URL parameters to isolate the sub-application running environment.

[0040] Example 4: Unified routing scheduling 4.1. Routing rule registration: Register the AMD module routing rules and iframe sub-application routing rules into the routing configuration set.

[0041] 4.2. Rule compilation: Compile routing rules into matching regular expressions through path-to-regexp.

[0042] 4.3. Dynamic scheduling: Based on the matching results of the routing request, the AMD module is triggered to load or create an iframe container on demand.

[0043] Example 5: Cross-domain communication linkage 5.1. Event bus: Establish an event bus between the main frame and the iframe sub-application to transmit structured data.

[0044] 5.2. PostMessage Protocol: Transmit command messages through the PostMessage protocol to ensure secure communication in a cross-domain environment.

[0045] 5.3. Complete public communication methods: such as Figure 3 The cross-domain communication diagram shown in the figure demonstrates the communication mechanism between the main framework and the iframe sub-application via the event bus, PostMessage protocol, and WebSockets. The provided devops-util.js file stores common communication methods. Once the sub-application is loaded, it supports various methods, such as real-time synchronization of the iframe sub-application's URL, framework permission management, login status synchronization, and window size changes.

[0046] 5.4, ​​websocket: Supports configuration of whether to enable websocket communication. When accessing the application route with websocket communication enabled, the PostMessage in 5.2 above will be used to synchronize the long connection data to the sub-application in real time.

[0047] See also Figure 4 , Figure 4 It is a structural block diagram of the micro-front-end routing scheduling system of the present invention.

[0048] In a second aspect, the present invention provides a micro-frontend routing scheduling device, comprising:

[0049] The routing dispatch center obtains the configuration information of all iframe sub-applications through the interface, and then uses wildcards to implement infinite nested routing matching of path-to-regexp, triggering the loading of iframe sub-applications based on the matching type; Generate an iframe routing page using the following method: function addIframe (router, serviceObject) { const iframeRoutes = iframeRoutes.map(r => ({ path: urlJoin(' / console', r.path, ':restPath*'), name: r.name, component: IFrame, meta: r.meta, pathToRegexpOptions: { strict: true, end: false } })) return iframeRoutes }

[0050] Sandbox execution engine, used to parse AMD modules and implement sandboxing and dependency sharing through the window object property rewriting mechanism;

[0051] The isolation container manager implements an independent routing registration component for each iframe through the routing scheduling center, dynamically generates iframe URLs with isolation parameters, and manages the lifecycle of iframe instances;

[0052] Resource loader, used to load JS or CSS resources of AMD modules on demand, reuse common libraries through dependency mapping tables, use global variables to store AMD module identifiers, and determine whether resources have been loaded in routing guards to avoid multiple requests; Use the following method to determine whether the module has been loaded: let loadedModule = {} if (!loadedModule[serviceAlias]) { Promise.all([ importStyle(resourceUrl.css, document.head), importScript(resourceUrl.js, document.body) ]).then(() => loadedModule[serviceAlias] = true);}

[0053] The communication coordinator is used to handle the event bus and PostMessage protocol communication between the main frame and the iframe sub-application.

[0054] Use the following methods to complete the reception and sending of information: function onMessage (data) { try { const cb = utilMap[data.action] if (typeof cb === 'function') { return cb(data.params) } } catch (e) { console.warn(e) } } function send (target, action, params) { target.postMessage({ action, params }, '*') }

[0055] The system notifies the sub-application through the send method; the onMessage method is used to receive iframe sub-application information. The system has pre-prepared methods such as returning to the homepage, updating the system URL, and leaving the page prompt. The sub-application information only needs to carry standard actions and information to be successfully called.

[0056] In a third aspect, the present invention provides a micro-frontend routing scheduling system, comprising:

[0057] Configuration repository, used to store module resource addresses, routing rules, and dependency mapping tables; Use the following method to determine whether the registered sub-application is configured to enable websocket: detectHasWebsocket (router) { try { const meta = router.meta || {} const path = router.path const pathRegs = meta.webSocket || [] return pathRegs.some((reg) => reg && new RegExp(reg).test(path)) } catch (error) { return false } } When the page routing address meets the configured regular expression, websocket will send a message to notify the server, thereby integrating all websocket connections.

[0058] The micro-frontend routing scheduling device as described above;

[0059] The security sandbox layer implements operation isolation by combining the window attribute isolation mechanism of the sandbox execution engine and the iframe environment of the isolation container manager.

[0060] In a fourth aspect, the present invention further provides an electronic device, comprising: a processor and a memory, wherein the memory stores executable instructions, and when the processor executes the instructions, the method in any one of the above-mentioned embodiments is implemented.

[0061] The device may also preferably include a communication interface, which is used for communicating with external devices and transmitting data interactively.

[0062] It should be noted that the memory may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory.

[0063] In a fifth aspect, the present invention further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the method in any one of the above-mentioned embodiments is implemented.

[0064] It should be understood that the computer-readable storage medium is any data storage device that can store data or programs that can be subsequently read by a computer system. Examples of computer-readable storage media include read-only memory, random access memory, CD ROMs, HDDs, DVDs, magnetic tapes, and optical data storage devices. Computer-readable storage media can also be distributed among network-coupled computer systems so that computer-readable code can be stored and executed in a distributed manner.

[0065] The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wire, optical cable, radio frequency (RF), etc., or any suitable combination thereof.

[0066] In some embodiments, the computer-readable storage medium may be non-transitory.

[0067] In the above embodiments, all or part of the embodiments may be implemented using software, hardware, firmware, or any combination thereof. When implemented using software, all or part of the embodiments may be implemented in the form of a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the present application are generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transferred from one computer-readable storage medium to another.

[0068] In the description of this specification, any process or method description in a flowchart or otherwise described herein can be understood to represent a module, segment or portion of code including one or more executable instructions for implementing the steps of a specific logical function or process. And the scope of the preferred embodiments of the present application includes other implementations, in which the functions may not be performed in the order shown or discussed, including performing the functions in a substantially simultaneous manner or in the reverse order depending on the functions involved.

[0069] The logic and / or steps represented in the flowchart or otherwise described herein may be considered, for example, as a sequenced list of executable instructions for implementing the logical functions, and may be embodied in any computer-readable medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a system including a processor, or other system that can fetch and execute instructions from an instruction execution system, apparatus, or device).

[0070] Finally, it should be noted that the above-described embodiments are only specific implementation methods of the present application, which are used to illustrate the technical solutions of the present application rather than to limit them. The scope of protection of the present application is not limited thereto. Although the present application has been described in detail with reference to the aforementioned embodiments, ordinary technicians in this field should understand that any technician familiar with this technical field can still modify the technical solutions recorded in the aforementioned embodiments within the technical scope disclosed in the present application, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be covered by the scope of protection of the present application.

Claims

1. A micro-frontend routing scheduling method, characterized in that: include: Step S1: Dynamically obtain the resource address, and dynamically obtain the AMD resource address of the micro-frontend module and the URL address of the iframe sub-application through the configuration interface; Step S2: AMD module sandboxing. For AMD standard modules, the module operation sandboxing is implemented by rewriting the custom property registration mechanism of the window object, and the common library is shared based on the global dependency mapping table; Step S3: Dynamically isolate the iframe, create an iframe container with isolation parameters for the sub-application, and dynamically generate a URL with a sandbox identifier to isolate the running environment; Step S4: Unify routing scheduling, use path-to-regexp to compile routing rules, and dynamically schedule AMD module loading or iframe sub-application loading according to routing matching results.

2. The method according to claim 1, characterized in that The dynamic acquisition of resource addresses includes: S1.1: During the routing guard interception phase, dynamically create a script tag to load the AMD module JS and a style tag to load the CSS; S1.2: Reuse the common dependency library of AMD modules through the preset module alias mapping table; S1.3: Generate an iframe URL parameter that carries the isolated session ID to ensure the isolation of the sub-application environment.

3. The method according to claim 1, characterized in that The unified routing scheduling includes: S4.1: Register the routing configuration set, including AMD module routing rules and iframe sub-application routing rules; S4.2: Compile routing rules into matching regular expressions through path-to-regexp; S4.3: Based on the routing request hit result, execute the AMD module to load or create an iframe container on demand.

4. The method according to claim 1, wherein Also includes: Step S5: Cross-domain communication linkage, establishing a two-way communication channel between the main frame and the iframe sub-application, delivering structured data through the event bus, or transmitting instruction messages through the PostMessage protocol.

5. A micro front-end routing scheduling device, characterized in that: include: The routing dispatch center is used to integrate path-to-regexp to implement routing rule compilation and trigger the loading of AMD modules or iframe sub-applications based on the matching type; Sandbox execution engine, used to parse AMD modules and implement sandboxing and dependency sharing through the window object property rewriting mechanism; Isolation container manager, used to dynamically generate iframe URLs with isolation parameters and manage the lifecycle of iframe instances; Resource loader, used to load JS or CSS resources of AMD modules on demand and reuse common libraries through dependency mapping tables; The communication coordinator is used to handle the event bus and PostMessage protocol communication between the main frame and the iframe sub-application.

6. A micro-frontend routing scheduling system, characterized in that: include: Configuration repository, used to store module resource addresses, routing rules, and dependency mapping tables; The micro-frontend routing scheduling device according to claim 5; The security sandbox layer implements operation isolation by combining the window attribute isolation mechanism of the sandbox execution engine and the iframe environment of the isolation container manager.

7. An electronic device, characterized in that: include: A processor and a memory, wherein the memory stores executable instructions, and when the processor executes the instructions, the method according to any one of claims 1 to 4 is implemented.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which implements the method according to any one of claims 1 to 4 when executed by a processor.

Images