Micro-front-end infrastructure construction method, device, equipment and medium

Abstract

The invention discloses a micro-front-end infrastructure construction method, device, equipment and medium, relates to the technical field of computer software, can be applied to financial science and technology or medical health business scenarios, and comprises the following steps: integrating basic components, universal components and universal tools to form a basic resource set; calling a packaging tool, screening resources matched with the technology stack of the micro-application in the basic resource set, and packaging the resources into a uniform resource file; redirecting the resource reference of the micro-application to a remote path of the uniform resource file through a resource mapping mechanism to form a mapping relationship between a technology stack and resources; based on the mapping relation, synchronously executing style processing operation and syntactic analysis operation for the micro-application; and based on the virtual element creation method and the style isolation information, rewriting virtual element creation logic of the micro-application, supplementing a style identifier for the micro-application, and marking to realize style isolation of the micro-application in the running process. According to the method, the micro-front-end project starting compiling efficiency can be improved.

Description

Technical Field

[0001] The present application relates to the field of computer software technology, and in particular to a method, apparatus, equipment, and medium for constructing a micro-frontend infrastructure. Background Art

[0002] As business systems in the financial technology and healthcare sectors become increasingly complex and large-scale, micro-frontend architectures, by breaking down monolithic applications into independent sub-applications, have become a key solution to addressing the inefficiencies of cross-departmental collaborative development and high system maintenance costs. In financial scenarios, micro-frontend infrastructure must implement micro-application loading scheduling, resource sharing, and runtime isolation, ensuring that payment modules are prioritized for high-concurrency transactions, customer information components are reused in wealth management and credit operations, and transaction data is securely isolated from user profile data. In healthcare scenarios, precise micro-application scheduling is required to enable the reuse of medical resource components, securely isolate diagnostic and treatment data, and ensure rapid response from emergency systems, sharing of patient information across multiple departments, and the independence of medical records and laboratory data.

[0003] However, when building financial and medical micro-frontend infrastructure, existing solutions are generally based on traditional packaging tools, facing bottlenecks in project startup speed, compilation efficiency, and resource management flexibility. Especially when dealing with large-scale projects with high frequency iterations, the inefficient compilation process seriously slows down the development cycle and online speed. Summary of the Invention

[0004] In view of this, the present application provides a micro-frontend infrastructure construction method, device, equipment and medium, which can improve the startup compilation efficiency of micro-frontend projects when the micro-frontend infrastructure is constructed.

[0005] According to a first aspect of the present application, a method for constructing a micro-frontend infrastructure is provided, comprising:

[0006] Integrate basic components, common components, and common tools to form a reusable basic resource set, which is used to record the technology stack version information adapted by each resource;

[0007] Calling a packaging tool to filter resources matching the technology stack of the micro-application from the basic resource set based on the technology stack version information, and packaging them into a unified resource file;

[0008] Redirecting the resource reference of the micro-application to the remote path of the unified resource file through the resource mapping mechanism to form a mapping relationship between the technology stack and the resources;

[0009] Based on the mapping relationship between the technology stack and the resources, a style processing operation and a syntax analysis operation are synchronously performed on the micro-application. The style processing operation is used to perform style isolation marking in combination with the style isolation requirements of the unified resource file to obtain style isolation information. The syntax analysis operation is used to identify the virtual element creation method to achieve preprocessing of style and code structure.

[0010] Based on the virtual element creation method and the style isolation information, the virtual element creation logic of the micro-application is rewritten, and the style identifier is supplemented and marked for the micro-application to achieve style isolation of the micro-application during operation.

[0011] According to a second aspect of the present application, a micro-frontend infrastructure construction device is provided, including:

[0012] Integration module, used to integrate basic components, general components and general tools to form a reusable basic resource set, which is used to record the technology stack version information adapted by each resource;

[0013] A screening module is used to call a packaging tool to screen resources matching the technology stack of the micro-application from the basic resource set based on the technology stack version information, and package them into a unified resource file;

[0014] A redirection module is used to redirect the resource reference of the micro application to the remote path of the unified resource file through a resource mapping mechanism to form a mapping relationship between the technology stack and the resources;

[0015] A processing module is configured to synchronously perform a style processing operation and a syntax analysis operation on the micro-application based on the mapping relationship between the technology stack and the resources. The style processing operation is configured to perform style isolation marking in combination with the style isolation requirements of the unified resource file to obtain style isolation information. The syntax analysis operation is configured to identify a virtual element creation method to implement preprocessing of style and code structure.

[0016] The isolation module is used to rewrite the virtual element creation logic of the micro-application based on the virtual element creation method and the style isolation information, and to supplement and label the style identification for the micro-application to achieve style isolation of the micro-application during operation.

[0017] According to a third aspect of the present application, a storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the above-mentioned micro-frontend infrastructure construction method is implemented.

[0018] According to a fourth aspect of the present application, an electronic device is provided, comprising a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor implements the above-mentioned micro-frontend infrastructure construction method when executing the program.

[0019] By means of the above technical solution, the micro-frontend infrastructure construction method, device, equipment and medium provided by this application can realize accurate screening and packaging of resources by integrating a set of reusable basic resources and recording the version information of the technology stack. After forming a unified resource file, resource references are redirected through a resource mapping mechanism to optimize resource management flexibility; style processing and syntax analysis operations are performed simultaneously to realize style isolation marking and code structure preprocessing, and then the virtual element creation logic is rewritten and style identification marking is supplemented to ensure runtime style isolation, effectively solving the problems of slow project startup, low compilation efficiency and insufficient resource management flexibility in existing solutions, and can improve the development cycle and online speed.

[0020] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 A schematic diagram of a process for constructing a micro-frontend infrastructure provided by an embodiment of the present application is shown;

[0022] Figure 2 A schematic diagram of a process for constructing a micro-frontend infrastructure according to another embodiment of the present application is shown;

[0023] Figure 3 A schematic structural diagram of a micro-frontend infrastructure construction device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0024] The present application will be described in detail below with reference to the accompanying drawings and in combination with embodiments. It should be noted that, unless there is a conflict, the embodiments and features in the embodiments of the present application can be combined with each other.

[0025] When building micro-frontend infrastructure (such as medical micro-frontend infrastructure), existing solutions are generally based on traditional packaging tools. They face bottlenecks in project startup speed (for example, the emergency system takes too long to start, affecting the rescue process), compilation efficiency (such as compilation delays during high-frequency system iterations), and resource management flexibility (such as fine-grained permission control of patient privacy data components). Especially when dealing with large-scale projects with high-frequency iterations, inefficient compilation processes seriously slow down the development cycle and online speed.

[0026] In order to solve the above technical problems, an embodiment of the present invention provides a method for constructing a micro front-end infrastructure, such as Figure 1 As shown, the method includes:

[0027] Step 110: Integrate basic components, general components, and general tools to form a reusable basic resource set. The basic resource set is used to record the technology stack version information adapted by each resource.

[0028] Among them, basic components are the core framework components of the technology stack, such as the front-end framework kernel module, UI library basic components, etc., which are the underlying dependencies for the operation of micro-applications; general components refer to reusable components that encapsulate general interaction logic, such as form components, table components, etc., which can be called across projects to avoid repeated development; general tools are independent functional modules, such as tool function libraries, file operation modules, etc., which are used to provide functional support across applications; basic resource collection refers to a resource library that manages reusable basic components, general components and tools in the project in layers according to the technology stack version, and supports accurate screening and matching of resources by version; technology stack version information is used to identify the framework and component library versions (such as the front-end framework version and UI library version) that the micro-application depends on, as the basis for resource screening and matching.

[0029] In specific application scenarios, the basic components, common components, and common tools used in project development can be extracted and integrated, and then categorized by different versions of the technology stack to form a reusable collection of basic resources. This collection records in detail the technology stack version range and dependency environment for each resource, providing data support for the subsequent precise selection and matching of resources based on the micro-application technology stack, achieving standardized resource management and efficient reuse.

[0030] Step 120: Call the packaging tool to filter resources that match the technology stack of the micro-application in the basic resource collection based on the technology stack version information, and package them into a unified resource file.

[0031] Among them, the packaging tool is an open source construction tool with functions such as module federation and code splitting. It can package resources into a shareable module set according to the technology stack version; the unified resource file is a shared module package generated by the packaging tool and contains resources of a specific technology stack version. It can realize cross-application remote reference based on the module federation mechanism.

[0032] For the disclosed embodiments, a packaging tool with module federation functionality can be called to filter matching components and tools from a collection of reusable basic resources stored hierarchically by technology stack based on the technology stack version information of the micro-application (such as framework type and version number), and package them into a unified resource file shared by multiple applications. During the packaging process, the tool will parse the resource reference syntax of the micro-application and redirect the resource path that meets the technology stack version requirements to the remote export path of the basic resource collection, thereby realizing centralized resource management and cross-application calls.

[0033] Step 130: Redirect the resource reference of the micro-application to the remote path of the unified resource file through the resource mapping mechanism, forming a mapping relationship between the technology stack and the resources.

[0034] Among them, the resource mapping mechanism is a rule system that converts the local resource references of micro-applications into remote unified resource file paths through packaging tool configuration or plug-ins, which can realize centralized management of resources and cross-application sharing; the remote path is a standardized access path for unified resource files in the network or project, following the format of "technology stack version + resource name", and supports remote loading during micro-application runtime.

[0035] For the disclosed embodiments, a resource mapping mechanism can be used to redirect local resource references (such as import component libraries) in the micro-application code to the remote path (such as the technology stack version / component library path) of the unified resource file using a packaging tool with a module federation function. In a specific implementation, the packaging tool generates a "local reference → remote path" mapping rule based on the technology stack version information (such as the framework version and the UI library version) of the micro-application during the compilation phase, so that the export module in the unified resource file is dynamically loaded through this rule during the micro-application runtime, and an accurate correspondence between the technology stack version and the resource file is established.

[0036] This solution can achieve efficient resource sharing and version compatibility through standardized resource reference paths and dynamic loading mechanisms; through the mapping relationship between technology stacks and resources, it can automatically match corresponding resources for micro-applications with different versions of technology stacks, solving the problem of multi-version dependency conflicts; at the same time, the standardization of remote paths (such as technology stack version / component name) supports on-demand loading of micro-applications at runtime, reducing the maintenance cost of the micro-front-end architecture and providing a unified interface for subsequent resource upgrades.

[0037] Step 140: Based on the mapping relationship between the technology stack and the resources, the style processing operation and the syntax analysis operation are synchronously executed for the micro-application.

[0038] Among them, the style processing operation is used to perform style isolation marking in combination with the style isolation requirements of the unified resource file to obtain style isolation information, and the syntax analysis operation is used to identify the virtual element creation method to achieve preprocessing of style and code structure.

[0039] For the embodiments disclosed herein, dual technical values ​​can be achieved by synchronously executing style processing and syntax analysis: at the style isolation level, by adding prefixes to CSS class names and intercepting the virtual element creation method to append the className prefix, cross-application style pollution can be eliminated from the compilation stage, and combined with runtime JS sandbox verification, the style conflict problem in traditional solutions can be completely solved; at the code preprocessing level, the virtual element creation method can be accurately located, laying the foundation for subsequent rewriting of style logic, and combined with the parallel processing capabilities of high-performance tools, the time consumption of style and syntax processing can be reduced without affecting the functional logic of the micro-application. At the same time, a unified processing framework is provided for the style isolation strategy of multiple technology stack versions, thereby improving the maintainability of the micro-front-end architecture.

[0040] Step 150: Based on the virtual element creation method and the style isolation information, rewrite the virtual element creation logic of the micro-application, and add a style identifier and tag the micro-application to achieve style isolation of the micro-application during operation.

[0041] For the embodiment of the present disclosure, based on the mapping relationship between the technology stack and the resources, the virtual element creation method of the micro-application can be logically rewritten by a tool with a code rewriting function: when creating a DOM node or component, a prefix identifier consistent with the unified resource file rule is automatically appended to the style-related parameters (such as className), and a custom data attribute tag is added to the virtual element to mark the micro-application isolation context. At the same time, combined with the style isolation information (such as the prefix rule in the intermediate style file), the tool is used to supplement the style class name and DOM element of the micro-application with a complete scope tag, and finally the JS running sandbox is used to verify the matching of the prefix and the isolation context when the micro-application is running, so as to intercept cross-application style pollution.

[0042] In summary, the micro-frontend infrastructure construction method provided by the present invention can achieve accurate resource screening and packaging by integrating a set of reusable basic resources and recording technology stack version information. After forming a unified resource file, resource references are redirected through a resource mapping mechanism to optimize resource management flexibility; style processing and syntax analysis operations are performed simultaneously to achieve style isolation marking and code structure preprocessing, and then the virtual element creation logic is rewritten and style identification marking is supplemented to ensure runtime style isolation. This effectively solves the problems of slow project startup, low compilation efficiency, and insufficient resource management flexibility in existing solutions, and can improve the development cycle and online speed.

[0043] Furthermore, as a refinement and extension of the specific implementation of the above embodiment, in order to fully illustrate the implementation of this embodiment, this embodiment also provides another micro-frontend infrastructure construction method, such as Figure 2 As shown, the method includes:

[0044] Step 210: Integrate basic components, general components, and general tools to form a reusable basic resource set. The basic resource set is used to record the technology stack version information adapted by each resource.

[0045] For the embodiment of the present disclosure, step 210 may include the following steps:

[0046] Step 210 - 1 , organize the basic components by technology stack version, and determine the compatible technology stack version range and dependency environment for each basic component to form basic component resources.

[0047] For the embodiments of the present disclosure, the core framework components can be hierarchically classified according to the technology stack version (such as the front-end framework version and the UI library version). By analyzing the source code compatibility and official documentation of each component, the adapted technology stack version range (such as the Node environment version and browser compatibility adapted by React 17.0.2) and the dependent environment (such as the dependent runtime library version) can be determined to form a standardized basic component resource library. For example, React 17.0.2 and React-dom17.0.2 can be classified into the same technology stack layer.

[0048] Through the technical solution of the embodiments of the present disclosure, version management of basic components can be achieved, so that micro-applications of the same technology stack version can directly reuse components of the corresponding layer (such as React 17 applications directly calling basic library-17 layer components), avoiding compilation errors caused by version incompatibility. At the same time, by clarifying the dependent environment, it can reduce environmental configuration conflicts and improve component reuse rate.

[0049] Step 210 - 2 : Extract the common components of the common interaction logic, and mark the technology stack version information adapted by each common component, as well as the dependency association with the basic components, to obtain the common component resources.

[0050] For the embodiments of the present disclosure, components with common interaction logic (such as form components and table components) can be extracted from various business scenarios, their dependencies on basic components can be analyzed (such as the common form component depends on the ContextAPI of React 17), and the technology stack version adapted by each component can be marked (such as AntD 4.21.7 adapted to React 16.8+), forming a common component resource with version dependency information.

[0051] By refining common components and clarifying dependency associations, we can avoid repeated development of similar interactive components and improve cross-project development efficiency. Version dependency annotation ensures that components are loaded on demand in different technology stack versions (for example, React 16 applications automatically match common components-16 version), reducing runtime errors caused by unclear dependencies and providing a clear version evolution path for component upgrades.

[0052] Step 210 - 3 : Integrate the general tools according to their functions, and associate the technology stack environment adapted by each general tool to obtain general tool resources.

[0053] For the embodiments of the present disclosure, general tools (such as lodash, file upload module) can be integrated according to functional modules (such as file operations, request processing, and tool functions). By testing the compatibility of each tool in different technology stack environments (such as Node 12 / 14 and browser ES6 / ES5 environments), the adapted technology stack environments are associated to form standardized tool resources.

[0054] Through the technical solution of the embodiment of the present disclosure, the scattered tool modules are centrally managed, which can improve the tool reuse rate and developers do not need to repeatedly integrate similar tools; the environment-related information ensures that the tools run correctly in different technology stack projects, which can reduce the debugging time caused by environmental incompatibility and facilitate the unified maintenance of the tools (such as security vulnerability repair).

[0055] Step 210 - 4 : The sorted basic component resources, common component resources, and common tool resources are stored in layers according to the technology stack version to form a reusable basic resource set.

[0056] According to the embodiments of the present disclosure, standardized resource management can be achieved through hierarchical storage of basic component resources, general component resources, and general tool resources. Developers can quickly search for matching resources through technology stack versions, thereby improving search efficiency.

[0057] Step 220: Call the packaging tool to filter resources that match the technology stack of the micro-application in the basic resource collection based on the technology stack version information, and package them into a unified resource file.

[0058] For the embodiment of the present disclosure, step 220 may include the following steps:

[0059] Step 220 - 1 : Obtain the technology stack identifier of the micro-application, and determine the target resource version range that matches the technology stack of the micro-application based on the technology stack identifier and the technology stack version information adapted by each resource recorded in the basic resource collection.

[0060] For the disclosed embodiment, after obtaining the technology stack identifier of the micro-application, the version range of the target resource version that matches can be determined by comparing the adaptation version information of each resource record in the basic resource set (such as the React version interval marked by the basic component), using a version compatibility algorithm (such as semantic version matching). For example, if the micro-application technology stack is React 17, all resources that are adapted to React 17.0.0-17.0.2 versions in the basic resource set are filtered out to form a target version range. This operation can achieve accurate screening of resources and avoid compilation errors caused by version incompatibility.

[0061] Step 220 - 2 : Determine the target basic components, target common components, and target common tools that match the micro-application in the basic resource collection according to the target resource version range.

[0062] Step 220 - 3 : Package the target basic components, target common components, and target common tools to obtain a unified resource file that matches the technology stack of the micro-application.

[0063] For the disclosed embodiments, a packaging tool with module federation functionality can be used to compile and package the target basic components, target general components, and target general tools. By configuring the remote path to redirect resource references to the basic capability library, a unified file containing all matching resources is generated, supporting dynamic loading at runtime for micro-apps. By exporting a unified resource file through module federation, multiple micro-apps can share the same resources, reducing duplicate resource usage and runtime memory usage.

[0064] Step 230: Redirect the resource reference of the micro-application to the remote path of the unified resource file through the resource mapping mechanism, forming a mapping relationship between the technology stack and the resources.

[0065] For the embodiment of the present disclosure, step 230 may include the following steps:

[0066] Step 230-1: Generate a remote path that redirects the local resource reference of the micro-application to a unified resource file.

[0067] For the embodiment of the present disclosure, by analyzing the local resource references (such as the import component library) in the micro-application code, a tool with a syntax parsing function can be used to generate the corresponding remote path, and the local references can be redirected to the storage location of the unified resource file, so that the micro-application no longer loads the local component when it is running, but points to the shared resources exported by the basic capability library. This operation can achieve standardization and centralized management of resource references. Through redirection, different micro-applications can share the same unified resource file, reduce the use of duplicate resources, reduce project compilation time, and shorten startup time; at the same time, avoid reference failures caused by changes in local resource paths, and improve maintenance efficiency.

[0068] Step 230-2: Call the module federation mechanism of the packaging tool, and dynamically load the export module of the unified resource file at runtime according to the remote path configuration of the micro-application, so as to form a real-time mapping relationship between the technology stack and the resources.

[0069] For the embodiment of the present disclosure, a packaging tool with a module federation function can be called to configure the micro-application runtime loading logic according to the generated remote path: when the micro-application requests resources, the export module of the unified resource file is dynamically obtained through the module federation mechanism, and a real-time mapping of the technology stack version and the resources is established.

[0070] Through the module federation mechanism, dynamic on-demand loading of resources can be achieved. Micro-applications only load the corresponding version of resources when needed, reducing the initial loading time; real-time mapping ensures that micro-applications of multiple technology stack versions load the corresponding resources independently, eliminating version conflicts, and supporting hot updates of resources to improve development efficiency.

[0071] Step 240: Based on the mapping relationship between the technology stack and resources, configure the corresponding environment dependencies for the micro-application packaging to ensure that the packaging environment is compatible with the technology stack and unified resource files of the micro-application.

[0072] For the disclosed embodiments, based on the mapping relationship between technology stacks and resources, matching environment dependencies can be configured for micro-application packaging: the required runtime environment is determined by analyzing the technology stack identifier, and the module federation parameters of the packaging tool (such as remote resource paths and plug-in loading order) are configured to align the packaging environment with the technology stack requirements of the unified resource file. This operation ensures that micro-applications run consistently in different deployment environments, reduces manual configuration costs, and improves development efficiency.

[0073] Step 250: Perform a style processing operation on the micro-application. In the style processing operation, adjust the scope rules of the micro-application style according to the style specification of the unified resource file to generate an intermediate style file.

[0074] For the embodiment of the present disclosure, step 250 may include the following steps:

[0075] Step 250 - 1 : Based on the mapping relationship between the technology stack and the resources, obtain the style isolation rules of the unified resource file.

[0076] For the embodiments of the present disclosure, preset style isolation rules, such as class name prefix generation rules or scope tag specifications, can be extracted from the unified resource file based on the mapping relationship between the technology stack and the resources. The rule defines the specific implementation method of style isolation, such as prefix length, character combination and application scope, etc., which can provide a unified standard for subsequent style processing. Through a standardized rule acquisition mechanism, it can be ensured that micro-applications of different technology stack versions adopt corresponding isolation strategies, avoid style conflicts caused by rule confusion, improve the consistency of style isolation solutions, and provide a basis for centralized management and updating of rules, thereby improving maintenance efficiency.

[0077] Step 250 - 2 , use the plug-in to traverse the CSS file of the micro-application, add a prefix identifier consistent with the style isolation rule to the CSS class name in the CSS file, and obtain the first style code.

[0078] For the disclosed embodiment, a plug-in with CSS traversal functionality can be used to scan all CSS files of a micro-app and add a unique prefix identifier to each CSS class name according to the style isolation rules. The prefix can achieve physical isolation of the style scope, so that the style is only effective in the current micro-app.

[0079] Step 250 - 3 : Write a custom plug-in to intercept the virtual element creation method, append the same prefix identifier to the className attribute in the input parameter of the virtual element creation method, and obtain the second style code.

[0080] In the disclosed embodiments, a custom plug-in can be written to parse the syntax tree of the micro-app's JS code, locate the virtual element creation method, and automatically append a prefix identifier consistent with the CSS class name to the className attribute in the method parameter. This dynamic prefix appending solves the style isolation problem when dynamically generating the DOM, reducing the risk of runtime style contamination.

[0081] Step 250 - 4 : Integrate the first style code and the second style code to obtain an intermediate style file containing complete scope tags.

[0082] For the disclosed embodiment, the prefixed CSS code (first style code) can be integrated with the modified JS code (second style code) to generate an intermediate style file containing a complete scope tag. This file contains all the style rules of the micro-application and the corresponding scope tags, which are used for integration with the unified resource file during subsequent packaging. The generation of the intermediate style file can achieve the final encapsulation of style isolation, making the packaged micro-application style completely independent, and reducing the style conflict rate to 0 when multiple applications coexist.

[0083] Step 260: Perform a syntax analysis operation on the micro-application. In the syntax analysis operation, call a syntax analysis tool to parse the micro-application code syntax tree and locate the micro-application virtual element creation method.

[0084] For the disclosed embodiments, a tool with a syntax analysis function can be called to parse the micro-application code, generate an abstract syntax tree, and traverse the tree structure to find the virtual element creation method. Through the syntax analysis operation, the virtual element creation method can be automatically located, which can significantly improve efficiency compared to manual search methods and ensure that all scenarios of dynamically generated DOM can be covered (such as dynamic component loading, conditional rendering, etc.).

[0085] Step 270: Based on the virtual element creation method and the style isolation information, rewrite the virtual element creation logic of the micro-application, and add a style identifier and tag the micro-application to achieve style isolation of the micro-application during operation.

[0086] For the embodiments of the present disclosure, a mapping relationship between the micro-application virtual element creation method and the style isolation strategy (such as the class name prefix rule) can be established by analyzing the calling scenario of the micro-application virtual element creation method; when the virtual element is created, a prefix is ​​automatically appended to the style parameters such as className according to the mapping relationship, and custom data attributes are added to the element, and the isolation context of the micro-application to which it belongs is marked; an independent JS running sandbox is created for the micro-application through the isolation engine, and the matching of the element prefix and the isolation context is verified based on the intermediate style file at runtime, and the style rules that do not carry a legal prefix are intercepted to block cross-application style pollution.

[0087] Accordingly, step 270 of the embodiment may include the following steps:

[0088] Step 270 - 1 : Create a mapping relationship between the virtual element creation method and the style isolation strategy.

[0089] Step 270 - 2 : According to the mapping relationship between the virtual element creation method and the style isolation strategy, a prefix identifier is automatically added to the style-related parameters when the virtual element is created.

[0090] Step 270 - 3: During the virtual element creation process, add custom data attributes to the virtual element to mark the isolation context of the micro-application to which the virtual element belongs.

[0091] Step 270-4: Create an independent JS running sandbox for the micro-application through the isolation engine. During the operation of the micro-application, the JS running sandbox performs style verification on the prefix identifier and isolation context based on the intermediate style file to achieve style isolation of the micro-application during operation and intercept cross-application style pollution.

[0092] It should be noted that the technical solutions in this application can be applied to but not limited to financial technology and medical health business scenarios.

[0093] As a possible implementation method, based on the micro-frontend infrastructure construction method proposed in this application, in fintech business scenarios, the basic components can be first layered and sorted according to the technology stack version. For example, the components of core modules such as account management and transaction settlement can be classified according to the framework version, and their adapted version range and dependency environment can be clarified; the common components of the common interaction logic can be refined, and the adapted technology stack version and dependency relationship with the basic components can be marked, such as a unified customer authentication component; and common tools can be integrated and associated with their adapted technology stack environment, such as data encryption tools. After these resources are stored in layers according to version to form a basic resource collection, the technology stack identifier of the financial micro-application, such as the React 17 technology stack of the payment system, is obtained, and the matching target resource version range is determined. Based on this, the corresponding target basic components, common components, and common tools are selected and packaged to generate a unified resource file. Through the resource mapping mechanism, the local resource references of the micro-application are redirected to the remote path of the unified resource file, and the environment dependency is configured for the micro-application based on the mapping relationship. Style processing and syntax analysis operations are performed, and the virtual element creation logic is rewritten to achieve style isolation.

[0094] In fintech business scenarios, resource sharing and precise matching can reduce the cost of duplicate component development for different business lines such as account management and wealth management, thereby improving development efficiency. The optimization of high-performance packaging tools significantly improves compilation efficiency. In the scenario of high-frequency transactions in the financial system, project startup time will be greatly shortened, ensuring rapid response of core functions such as payment and settlement, and avoiding transaction losses caused by system delays. Standardized resource management and version compatibility mechanisms can resolve dependency conflicts when multiple technology stacks are mixed, and support independent development of different business segments such as credit and insurance using different technology stacks. Strict style and data isolation strategies ensure the secure isolation of transaction data, user privacy data, etc. at runtime, meet the high security and compliance requirements of the financial industry, and reduce system maintenance costs and security risks.

[0095] As another possible implementation method, based on the micro-frontend infrastructure construction method proposed in this application, in the medical and health business scenario, the basic components of medical applications such as electronic medical records and imaging diagnosis can first be layered and sorted according to the technology stack version, and the technology stack version range and dependency environment adapted by each component can be clarified; general interactive logic components such as patient information display and test report generation can be refined, and their technology stack versions and dependencies can be marked; general tools such as data encryption and medical terminology parsing can be integrated and associated with the adaptation environment to form a basic resource set for hierarchical storage. Subsequently, according to the technology stack identifiers of different medical micro-applications, the matching target basic components, general components and tools are screened and packaged into a unified resource file. The micro-application resource reference is redirected through the resource mapping mechanism, the environment dependency is configured based on the mapping relationship, and style processing and syntax analysis are performed, and the virtual element creation logic is rewritten to achieve isolation of medical data and interface style.

[0096] In healthcare business scenarios, resource reuse and precise matching can reduce duplication of work in system development across different departments, such as increasing the component reuse rate of outpatient registration and inpatient management systems, and accelerating the development and iteration of medical information systems. Efficient packaging can significantly shorten system startup time, ensuring rapid response of key functions such as electronic medical records and imaging systems in time-sensitive scenarios such as emergency treatment, thus buying valuable time to save patients. Standardized resource management can resolve dependency conflicts caused by the mixing of multiple technology stacks, and support independent development by different departments using appropriate technology stacks. Strict style and data isolation strategies can ensure the security of sensitive medical data such as medical records and tests, meet the high compliance requirements of the medical industry, and reduce system maintenance costs and data leakage risks.

[0097] In summary, the technical solution in this application forms a reusable basic resource set by integrating basic components, filters and matches resources based on the technology stack version information and packages them into a unified resource file, redirects resource references through the resource mapping mechanism, synchronously executes style processing and syntax analysis operations, rewrites the virtual element creation logic and supplements style identification tagging, and combines the isolation engine to create a JS running sandbox to implement style verification, thereby improving project startup and compilation efficiency, realizing resource sharing and dynamic loading, solving the problem of style and JS isolation, optimizing resource management flexibility, and providing a complete infrastructure solution for micro front-ends, thereby accelerating development and online efficiency.

[0098] Further, as Figure 1 and Figure 2 The specific implementation of the method shown in this embodiment provides a micro-front-end infrastructure construction device, such as Figure 3 As shown, the device includes: an integration module 31, a screening module 32, a redirection module 33, a processing module 34, and an isolation module 35;

[0099] Integration module 31, which can be used to integrate basic components, general components and general tools to form a reusable basic resource set. The basic resource set is used to record the technology stack version information adapted by each resource;

[0100] The screening module 32 can be used to call the packaging tool to screen the resources that match the technology stack of the micro application in the basic resource set based on the technology stack version information and package them into a unified resource file;

[0101] The redirection module 33 can be used to redirect the resource reference of the micro application to the remote path of the unified resource file through the resource mapping mechanism, forming a mapping relationship between the technology stack and the resources;

[0102] The processing module 34 can be used to synchronously perform style processing operations and syntax analysis operations on the micro-application based on the mapping relationship between the technology stack and resources. The style processing operation is used to perform style isolation marking based on the style isolation requirements of the unified resource file to obtain style isolation information. The syntax analysis operation is used to identify the virtual element creation method to implement style and code structure preprocessing;

[0103] The isolation module 35 can be used to rewrite the virtual element creation logic of the micro-application based on the virtual element creation method and style isolation information, and to supplement and label the style identification for the micro-application to achieve style isolation of the micro-application during operation.

[0104] In some embodiments of the present application, the integration module 31 can be specifically used to sort out the basic components in layers according to the technology stack version, and determine the adapted technology stack version range and dependency environment for each basic component to form basic component resources; extract the general components of the general interaction logic, and mark the adapted technology stack version information of each general component, as well as the dependency association with the basic components to obtain general component resources; integrate general tools according to functions, and associate the adapted technology stack environment of each general tool to obtain general tool resources; store the sorted basic component resources, general component resources, and general tool resources in layers according to the technology stack version to form a reusable basic resource set.

[0105] In some embodiments of the present application, the screening module 32 can be specifically used to obtain the technology stack identification of the micro-application, and determine the target resource version range that matches the technology stack of the micro-application based on the technology stack identification and the technology stack version information of each resource adaptation recorded in the basic resource collection; determine the target basic components, target general components and target general tools that match the micro-application in the basic resource collection according to the target resource version range; package the target basic components, target general components and target general tools to obtain a unified resource file that matches the technology stack of the micro-application.

[0106] In some embodiments of the present application, the redirection module 33 can be specifically used to generate a remote path that redirects the local resource reference of the micro-application to a unified resource file; call the module federation mechanism of the packaging tool, and dynamically load the export module of the unified resource file at runtime according to the remote path configuration of the micro-application to form a real-time mapping relationship between the technology stack and the resources.

[0107] In some embodiments of the present application, the processing module 34 can be specifically used to configure corresponding environmental dependencies for the micro-application packaging based on the mapping relationship between the technology stack and resources, ensuring that the packaging environment is compatible with the technology stack and unified resource file of the micro-application; performing style processing operations on the micro-application, in which the scope rules of the micro-application style are adjusted according to the style specifications of the unified resource file, and an intermediate style file is generated; performing syntax analysis operations on the micro-application, in which the syntax analysis tool is called to parse the syntax tree of the micro-application code and locate the micro-application virtual element creation method.

[0108] In some embodiments of the present application, when generating an intermediate style file, the processing module 34 can be specifically used to obtain the style isolation rules of the unified resource file based on the mapping relationship between the technology stack and the resources; use the plug-in to traverse the CSS file of the micro-application, and add a prefix identifier consistent with the style isolation rule to the CSS class name in the CSS file to obtain a first style code; write a custom plug-in to intercept the virtual element creation method, and append the same prefix identifier to the className attribute in the input parameter of the virtual element creation method to obtain a second style code; integrate the first style code and the second style code to obtain an intermediate style file containing a complete scope tag.

[0109] In some embodiments of the present application, the isolation module 35 can be specifically used to create a mapping relationship between the virtual element creation method and the style isolation strategy; according to the mapping relationship between the virtual element creation method and the style isolation strategy, a prefix identifier is automatically appended to the style-related parameters when the virtual element is created; during the virtual element creation process, custom data attributes are added to the virtual element to mark the isolation context of the micro-application to which the virtual element belongs; an independent JS running sandbox is created for the micro-application through the isolation engine, and during the operation of the micro-application, the JS running sandbox performs style verification on the prefix identifier and the isolation context based on the intermediate style file, thereby realizing style isolation of the micro-application during operation and intercepting cross-application style pollution.

[0110] It should be noted that for other corresponding descriptions of the functional units involved in the micro-frontend infrastructure construction device provided in this embodiment, please refer to Figure 1 and Figure 2 The corresponding description in will not be repeated here.

[0111] Based on the above Figure 1 and Figure 2 The method shown in FIG. 1 is a method for performing the above-mentioned operation. Accordingly, this embodiment further provides a storage medium on which a computer program is stored. When the program is executed by a processor, the above-mentioned Figure 1 and Figure 2 The micro-frontend infrastructure construction method shown.

[0112] Based on this understanding, the technical solution of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, USB flash drive, mobile hard disk, etc.), and includes a number of instructions for enabling an electronic device (which can be a personal computer, server, or network device, etc.) to execute the methods of various implementation scenarios of the present application.

[0113] Based on the above Figure 1 and Figure 2 The method shown, and Figure 3 In order to achieve the above-mentioned purpose, the embodiment of the present application further provides an electronic device, which can be a personal computer, a tablet computer, a server, or other network equipment, etc. The device includes a storage medium and a processor; the storage medium is used to store a computer program; the processor is used to execute the computer program to achieve the above-mentioned Figure 1 and Figure 2 The micro-frontend infrastructure construction method shown.

[0114] Optionally, the physical device may further include a user interface, a network interface, a camera, a radio frequency (RF) circuit, a sensor, an audio circuit, a Wi-Fi module, and the like. The user interface may include a display, an input unit such as a keyboard, and the like. The optional user interface may also include a USB interface, a card reader interface, and the like. The network interface may optionally include a standard wired interface, a wireless interface (such as a Wi-Fi interface), and the like.

[0115] Those skilled in the art will understand that the above-mentioned physical device structure provided in this embodiment does not constitute a limitation on the physical device, and may include more or fewer components, or a combination of certain components, or different component arrangements.

[0116] The storage medium may also include an operating system and a network communication module. The operating system is a program that manages the hardware and software resources of the physical device, supporting the execution of information processing programs and other software and / or programs. The network communication module is used to enable communication between components within the storage medium, as well as with other hardware and software within the physical information processing device.

[0117] Through the description of the above implementation methods, those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform, or by hardware.

[0118] The embodiment of the present invention forms a reusable basic resource set by integrating basic components, etc., screens and matches resources based on the technology stack version information and packages them into a unified resource file, redirects resource references through a resource mapping mechanism, synchronously performs style processing and syntax analysis operations, rewrites the virtual element creation logic and supplements style identification tagging, and combines the isolation engine to create a JS running sandbox to implement style verification, thereby improving project startup and compilation efficiency, realizing resource sharing and dynamic loading, solving the style and JS isolation problem, optimizing resource management flexibility, and providing a complete infrastructure solution for micro front-ends, thereby accelerating development and online efficiency.

[0119] Those skilled in the art will understand that the accompanying drawings are only schematic diagrams of a preferred implementation scenario, and the modules or processes in the accompanying drawings are not necessarily required to implement the present application. Those skilled in the art will understand that the modules in the devices in the implementation scenario can be distributed in the devices of the implementation scenario according to the implementation scenario description, or can be changed accordingly and located in one or more devices different from the implementation scenario. The modules of the above-mentioned implementation scenario can be combined into one module, or can be further split into multiple sub-modules.

[0120] The serial numbers of the above application are for descriptive purposes only and do not represent the advantages or disadvantages of the implementation scenarios. The above disclosure only discloses several specific implementation scenarios of the present application, but the present application is not limited thereto. Any changes that can be conceived by those skilled in the art should fall within the scope of protection of the present application.

[0121] The non-Company software tools or components appearing in the embodiments of this application are merely examples and do not represent actual use.

Claims

1. A method for constructing a micro-frontend infrastructure, characterized in that: include: Integrate basic components, common components, and common tools to form a reusable basic resource set, which is used to record the technology stack version information adapted by each resource; Calling a packaging tool to filter resources matching the technology stack of the micro-application from the basic resource set based on the technology stack version information, and packaging them into a unified resource file; Redirecting the resource reference of the micro-application to the remote path of the unified resource file through the resource mapping mechanism to form a mapping relationship between the technology stack and the resources; Based on the mapping relationship between the technology stack and the resources, a style processing operation and a syntax analysis operation are synchronously performed on the micro-application. The style processing operation is used to perform style isolation marking in combination with the style isolation requirements of the unified resource file to obtain style isolation information. The syntax analysis operation is used to identify the virtual element creation method to achieve preprocessing of style and code structure. Based on the virtual element creation method and the style isolation information, the virtual element creation logic of the micro-application is rewritten, and the style identifier is supplemented and marked for the micro-application to achieve style isolation of the micro-application during operation.

2. The method according to claim 1, characterized in that The integration of basic components, common components and common tools forms a reusable basic resource set, including: Organize basic components by technology stack version, and determine the adapted technology stack version range and dependency environment for each basic component to form basic component resources; Extract common components of common interaction logic, annotate the technology stack version information adapted by each common component, and its dependency association with basic components to obtain common component resources; Integrate general tools according to their functions and associate them with the technology stack environment adapted by each general tool to obtain general tool resources; The sorted basic component resources, the general component resources, and the general tool resources are stored in layers according to the technology stack version to form a reusable basic resource set.

3. The method according to claim 1, characterized in that The calling packaging tool selects resources matching the technology stack of the micro-application in the basic resource set based on the technology stack version information and packages them into a unified resource file, including: Obtain a technology stack identifier for the micro-application, and determine a target resource version range that matches the technology stack of the micro-application based on the technology stack identifier and the technology stack version information adapted by each resource recorded in the basic resource set; Determine, in the basic resource set according to the target resource version range, a target basic component, a target common component, and a target common tool that match the micro-application; The target basic components, the target general components, and the target general tools are packaged to obtain a unified resource file that matches the technology stack of the micro-application.

4. The method according to claim 1, wherein Redirecting the resource references of the micro-application to the remote path of the unified resource file through the resource mapping mechanism to form a mapping relationship between the technology stack and the resources, including: Generate a remote path that redirects the local resource reference of the micro-application to the unified resource file; The module federation mechanism of the packaging tool is called, and the micro-application is configured according to the remote path to dynamically load the export module of the unified resource file at runtime to form a real-time mapping relationship between the technology stack and the resources.

5. The method according to claim 1, wherein The synchronously executing a style processing operation and a syntax analysis operation for the micro-application based on the mapping relationship between the technology stack and the resources includes: Based on the mapping relationship between the technology stack and resources, configure the corresponding environment dependency for the micro-application packaging to ensure that the packaging environment is compatible with the technology stack of the micro-application and the unified resource file; Performing a style processing operation on the micro-application, in which, according to the style specification of the unified resource file, the scope rule of the micro-application style is adjusted to generate an intermediate style file; A syntax analysis operation is performed on the micro-application. In the syntax analysis operation, a syntax analysis tool is called to parse the micro-application code syntax tree and locate the micro-application virtual element creation method.

6. The method according to claim 5, characterized in that The performing of a style processing operation on the micro-application, wherein in the style processing operation, the scoping rules of the micro-application style are adjusted according to the style specification of the unified resource file to generate an intermediate style file, includes: Based on the mapping relationship between the technology stack and the resources, obtaining the style isolation rules of the unified resource file; Use the plug-in to traverse the CSS file of the micro-application, add a prefix identifier consistent with the style isolation rule to the CSS class name in the CSS file, and obtain a first style code; Writing a custom plug-in to intercept the virtual element creation method, appending the same prefix identifier to the className attribute in the input parameter of the virtual element creation method, and obtaining a second style code; The first style code and the second style code are integrated to obtain an intermediate style file containing complete scope tags.

7. The method according to claim 5, characterized in that The method of rewriting the virtual element creation logic of the micro-application based on the virtual element creation method and the style isolation information, and supplementing and labeling the style identifier for the micro-application to achieve style isolation of the micro-application during operation includes: Creating a mapping relationship between the virtual element creation method and the style isolation strategy; According to the mapping relationship between the virtual element creation method and the style isolation strategy, the prefix identifier is automatically added to the style-related parameters when the virtual element is created; During the virtual element creation process, a custom data attribute is added to the virtual element to mark the isolation context of the micro-application to which the virtual element belongs; An independent JS running sandbox is created for the micro-application through the isolation engine. During the running of the micro-application, the JS running sandbox performs style verification on the prefix identifier and the isolation context based on the intermediate style file, thereby realizing style isolation of the micro-application during the running process and intercepting cross-application style pollution.

8. A micro-frontend infrastructure construction device, characterized in that: include: Integration module, used to integrate basic components, general components and general tools to form a reusable basic resource set, which is used to record the technology stack version information adapted by each resource; A screening module is used to call a packaging tool to screen resources matching the technology stack of the micro-application from the basic resource set based on the technology stack version information, and package them into a unified resource file; A redirection module is used to redirect the resource reference of the micro application to the remote path of the unified resource file through a resource mapping mechanism to form a mapping relationship between the technology stack and the resources; A processing module is configured to synchronously perform a style processing operation and a syntax analysis operation on the micro-application based on the mapping relationship between the technology stack and the resources. The style processing operation is configured to perform style isolation marking in combination with the style isolation requirements of the unified resource file to obtain style isolation information. The syntax analysis operation is configured to identify a virtual element creation method to implement preprocessing of style and code structure. The isolation module is used to rewrite the virtual element creation logic of the micro-application based on the virtual element creation method and the style isolation information, and to supplement and label the style identification for the micro-application to achieve style isolation of the micro-application during operation.

9. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. An electronic device comprising a storage medium, a processor, and a computer program stored in the storage medium and executable on the processor, wherein: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

Images