Methods for loading public components or libraries on demand, and electronic devices and storage media.

Abstract

This invention relates to the field of web technology, and particularly to a method for on-demand loading of common components or libraries in a front-end microservice. The method includes: constructing each shared component used by the main application and sub-applications in the front-end microservice as a separate component library; when loading the main application, loading variable 'a', which stores the storage addresses of the common library and the component library; mounting variable 'a' and a common method 'b' onto a window object, whereby the common method 'b' loads the corresponding component library or common library according to a specified library name used by the corresponding sub-application; and allowing the sub-application to use the corresponding common component or library by referencing the specified library name. This invention, by pre-caching and mounting the address of the common library under the window object, allows all sub-applications to write it into the script tag of the microservice when needed, thus achieving on-demand loading of the common library.

Description

Technical Field

[0001] This invention relates to the field of web technology, and more particularly to a method for loading common components or libraries on demand in front-end microservices, as well as electronic devices, storage media, and program products. Background Technology

[0002] In browser applications built on a microservices architecture (also known as single-page applications), a main application can include many sub-applications, thus enabling modern browser applications to be very powerful. However, during the development of browser applications, these numerous sub-applications may use the same common components or libraries. When sub-applications need to use these common components or libraries, existing technologies generally employ the following two common methods to implement sub-applications referencing these common components or libraries:

[0003] 1. Package the aforementioned common components or libraries, deploy them to the NPM (Node Package Manager) repository, and install and use them in sub-applications. Obviously, this method will increase the size of sub-applications, and different sub-applications may repeatedly load the same components or libraries.

[0004] 2. The code compilation tool Webpack extracts common components or libraries used in all applications (including the main application and sub-applications). These common components or libraries are then inserted into the page at the sub-application's entry point using script tags; in other words, they are mounted onto the window object. However, for a single sub-application, since the script tags point to common components or libraries, including those not needed by the sub-application itself, they must still be loaded during the application's loading process, resulting in significant time wastage.

[0005] In summary, existing technologies often involve each sub-application independently referencing components or libraries, leading to repeated referencing of the same content. Furthermore, individual sub-applications cannot load specific components or libraries according to their needs, thus hindering the performance of micro-frontend services. Summary of the Invention

[0006] To address the aforementioned problems, this invention proposes a method for loading common components or libraries on demand in front-end microservices. The method includes:

[0007] Each shared component used by the main application and sub-applications in the aforementioned front-end microservice is constructed as a separate component library;

[0008] When the main application is loaded, variable a is loaded, and variable a is used to store the storage addresses of the public library and the component library;

[0009] The variable a and the public method b are mounted on the window object. The public method b loads the corresponding component library or public library according to the specified library name of the component library or public library used by the corresponding sub-application.

[0010] The sub-application uses the corresponding public components or libraries by referencing the specified library name.

[0011] In the above method, attaching the variable a and the public method b to the window object includes attaching the variable a and the public method b through the singleton pattern.

[0012] In the above method, the public method b loads the corresponding component library or public library according to the specified library name of the component library or public library used by the corresponding sub-application, including the public method b indicating the storage address of the component library or public library corresponding to the specified library name in the form of a script tag under the head tag of the page.

[0013] In the method described above, the script tag is set to load asynchronously.

[0014] In the above method, the public method b obtains the storage address corresponding to the specified library name from the variable a.

[0015] In the above method, the correspondence between the specified library names of the public library and the component library and the storage address is stored in a configuration file. When the main application is loaded, the correspondence is loaded into the variable a.

[0016] The present invention also discloses an electronic device, comprising:

[0017] At least one memory for storing computer instructions;

[0018] At least one processor implements the above method when the at least one processor executes the computer instructions.

[0019] The present invention also discloses a computer-readable storage medium storing at least one computer instruction, which is loaded and executed by a processor to implement the above-described method.

[0020] The present invention also discloses a computer program product, which includes a computer program / instruction that, when executed by a processor, implements the above-described method.

[0021] The main difference and advantage of this invention compared to existing technologies lies in its approach: A common component is built as a separate common library, allowing for individual component loading. Existing common libraries typically contain numerous functional units, requiring all units to be loaded simultaneously, wasting time. To enable each sub-application to load its required common components on demand, this invention caches the storage addresses of all component libraries within the main application. When a sub-application references one or more components, the corresponding component is loaded only through the cached storage address, eliminating the need to blindly preload all common libraries upon sub-application startup. Furthermore, on-demand loading effectively reduces the component size of sub-applications, improving loading performance. This loading method is fully applicable to mainstream front-end microservice architectures, resolving the issues of shared and on-demand loading of common components in microservices. Attached Figure Description

[0022] Figure 1 This is a diagram illustrating the loading and use of common components in a web micro-frontend;

[0023] Figure 2 This is a schematic diagram illustrating the loading and use of shared components or public libraries according to some embodiments of the present invention;

[0024] Figure 3 This is a flowchart proposed according to some embodiments of the present invention;

[0025] Figure 4 This is a schematic diagram of the library loading relationship proposed according to some embodiments of the present invention;

[0026] Figure 5 This is a schematic diagram of the basic hardware structure of an electronic device proposed according to some embodiments of the present invention. Detailed Implementation

[0027] To make the objectives and technical solutions of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the embodiments described below are only some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the described embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0028] Furthermore, to avoid confusion or obscuring the focus of this invention, some specific details will be omitted in the description. Also, unless otherwise specified, the embodiments and features described herein can be combined with each other.

[0029] Browser applications are the most commonly used tools for browsing the internet. A browser page sometimes contains only information, and sometimes it includes links to other web pages. In a microservices architecture, a browser page may also contain functional modules (or other applications), which are also launched by mouse clicks. From the user's perspective, clicking these functional modules results in opening a new page. From the application's hierarchical architecture perspective, the browser page is a main application, and the functional modules are sub-applications within this main application.

[0030] Figure 1 The diagram illustrates the loading and use of common components in a web micro-frontend. Under the main application 10, multiple sub-applications can be included to implement different functions, such as the first sub-application 12 and the second sub-application 13 shown in the diagram. It can be understood that multiple sub-applications typically include code segments with the same functionality; that is, different sub-applications can share some components or libraries. These shared components or common libraries 11a can be pre-written / compiled and stored in storage (usually network storage) for browser applications to load and use, without needing to repeatedly write code in each main application or sub-application. The shared components or common libraries 11a stored in a certain storage location can have a specific URL address. When each browser application loads the shared component or common library 11a, it can typically include this URL address using a script tag or link tag, thereby mounting the shared component or common library 11a into the browser page, or in other words, mounting it under the window object. That is, in Figure 1 The diagram illustrates that, on one hand, the shared component or public library 11a is fully loaded into the browser application. On the other hand, each individual application (main application and sub-applications) does not actually need to load the entire shared component or public library 11a, as a single application may only use a portion of its content. Clearly, this results in excessive content loading; the main application loads too much temporarily unnecessary content when loading the page, slowing down page loading speed. Furthermore, since script or link tags (statements indicating the storage address of the shared component or public library 11a) exist in multiple applications, when the version of the shared component or public library 11a is updated, its URL address changes accordingly. Programmers need to modify all script or link tags to update the storage address of the shared component or public library 11a in each application. This manual modification method is prone to errors and is detrimental to version management of the shared component or public library 11a.

[0031] Therefore, this invention proposes a novel method for loading public components or libraries. This method constructs a shared component as a component library, and multiple component libraries can form a component library list. This list includes the library name and storage address of each component library. Furthermore, existing public libraries can also be added to this list for unified management of all shared / public libraries. The aforementioned list can be deployed as a static resource in the main application. When a sub-application starts, it queries the list for the library's URL by library name, and then loads the specified library into the sub-application using a script tag or link tag, thus achieving on-demand loading.

[0032] Figure 2 This diagram illustrates the loading and use of shared components or public libraries according to some embodiments of the present invention. As shown, the main application 10 may include a configuration table 11b for shared components or public libraries. The configuration table 11b stores the name and corresponding storage address of each shared component or public library, i.e., the component library list mentioned above. When a sub-application, such as the first sub-application 12 or the second sub-application 13, needs to reference a certain shared component, it obtains the corresponding storage address from the configuration table 11b of the shared components or public libraries according to the specified library name, and then loads the specified library through a script tag or similar method.

[0033] Can be combined Figure 4 To understand. For example... Figure 4 As shown, the configuration table 11b of the shared component or public library stores the following information: the storage address of Lib1 is url1, and the storage address of Lib2 is url2. The first sub-application 12 references Lib1 and Lib2. The first sub-application 12 obtains the corresponding storage addresses url1 and url2 from the configuration table 11b of the shared component or public library according to the specified library names Lib1 and Lib2. Then, according to the instructions of url1 and url2, it downloads Lib1 and Lib2 from the corresponding locations and loads them into the first sub-application 12. Thus, when Lib1 or Lib2 is referenced, Lib1 and Lib2 can run normally.

[0034] Figure 2 The scheme for loading and using shared components or public libraries shown can load a number of specified public components or libraries as needed, thereby avoiding the defect that each sub-application needs to repeatedly load all libraries, greatly reducing invalid repeated loading, and greatly improving page loading speed, which can bring a good user experience.

[0035] Figure 3 This is a flowchart of a method for loading common components or libraries on demand in a front-end microservice, according to some embodiments of the present invention.

[0036] S31, each shared component used by the main application and sub-applications in the front-end microservice is built into a separate component library, i.e., one library name per component. The advantage of building a component library for each component is that each component can be loaded individually. When there are many shared components, if all shared components are built into a single public library, both the main application and sub-applications would need to load the entire library. However, it is impossible for a single main application or sub-application to use all the shared components, so loading the entire library is unnecessary. Furthermore, loading the entire library would increase application loading time. Building individual component libraries effectively reduces the time required to load the library.

[0037] S32, when the main application is loaded, variable 'a' is loaded. Variable 'a' is used to store the storage addresses of the common library and the component library. As mentioned earlier, the storage addresses of the common library and the component library can be stored in a configuration file. When the main application is loaded, this configuration file can be read, and the list of library names and addresses in it can be cached in variable 'a'. For example, variable 'a' can be an array, where each element is a key-value pair used to store the library name-address pair. Through this step, when the common library and the component library are updated, the programmer only needs to modify the list of library names and addresses in the configuration file, without having to modify the storage addresses separately in each application, greatly improving the efficiency of version management of the common library and the component library.

[0038] S33, the variable 'a' and the public method 'b' are attached to the window object of each sub-application. Specifically, the variable 'a' and the public method 'b' can be attached using the singleton pattern. The public method 'b' loads the corresponding component library or public library according to the specified library name used by the corresponding sub-application. For example, when the sub-application specifies that it needs to reference a component library with the library name Lib1, the public method 'b' queries the variable 'a' to find that the storage address of the component library with the library name Lib1 is url1, and then inserts the following script tag under the head tag of the sub-application: <script data-require-id＝"lib1”scr＝"url1”async>< / script> This directs the sub-application to retrieve the specified library Lib1 from the corresponding URL and load it into the sub-application. Furthermore, the loading method can be specified as asynchronous (async) within the script tag. Asynchronous loading of the corresponding JavaScript script does not block the rendering of the HTML page. However, if the HTML page has not yet finished loading after the JavaScript script has finished executing, the page rendering will be blocked until the JavaScript script completes its execution, at which point the HTML page loading will resume.

[0039] S34, the sub-application uses the corresponding public component or library by referencing the specified library name, such as Lib1.

[0040] The above process is fully applicable to mainstream front-end microservice architectures and solves the problems of non-sharing and on-demand loading of common components in microservices.

[0041] Figure 4 This is a schematic diagram illustrating the library loading relationship proposed according to some embodiments of the present invention. Figure 3 The method shown describes on-demand loading of common components or libraries in a front-end microservice. The main application 10 caches a configuration table 11b for common components or libraries, which stores the storage addresses of the component libraries or common libraries. For example, the storage address for library Lib1 is url1, and the storage address for library Lib2 is url2. The first sub-application 12 references Lib1 and Lib2. Based on the specified library names Lib1 and Lib2, the first sub-application 12 retrieves the corresponding storage addresses url1 and url2 from the configuration table 11b of the shared components or common libraries. Then, according to the instructions in url1 and url2, it downloads Lib1 and Lib2 from the corresponding locations and loads them into the first sub-application 12. Therefore, when Lib1 or Lib2 is referenced, Lib1 and Lib2 can run normally. The second sub-application 13 references Lib2. Based on the specified library name Lib2, the second sub-application 13 obtains the corresponding storage address url2 from the configuration table 11b of the shared component or public library. Then, according to the instructions of url2, it downloads Lib2 from the corresponding location and loads it into the second sub-application 13. Thus, when Lib2 is referenced, Lib1 and Lib2 can run normally.

[0042] Of course, the main application 10 may also need to reference Lib1 or Lib2. The method of referencing it is the same as that of the first sub-application 12 and the second sub-application 13, that is, to generate a script tag through the public method b, thereby loading Lib1 or Lib2.

[0043] The embodiments of loading and using shared components or public libraries provided in this invention can run on various electronic devices, such as servers. Figure 5 This is a schematic diagram of the basic hardware structure of an electronic device proposed according to some embodiments of the present invention.

[0044] like Figure 5 As shown, the electronic device 100 includes at least a main processor 101 and a storage medium 103. Depending on the actual usage requirements, the electronic device 100 may also include a coprocessor 102, an I / O unit 104, a network communication unit 105, and some other expansion units 106. The selectivity of the coprocessor 102, I / O unit 104, network communication unit 105, and other expansion units 106 is shown by dashed lines in the figure.

[0045] The main processor 101 and / or coprocessor 102 execute computer instructions stored in the storage medium 103 to implement the method proposed in this invention. The main processor 101 is the control center of the electronic device 100, typically a general-purpose processor (e.g., Intel CPUs from various series), capable of performing both logical processing and arithmetic calculations in a relatively balanced manner. The main processor 101 connects to various parts of the electronic device 100 using various interfaces, and implements various functions of the electronic device 100 by running or executing software programs stored in the storage medium 103 and calling data stored in the storage medium 103, thereby providing overall monitoring of the electronic device 100.

[0046] The coprocessor 102 is typically a dedicated processor (e.g., a user-programmable embedded microprocessor) used to implement a single function. For example, the coprocessor 102 could be a graphics processing unit (GPU), dedicated to processing graphics and images. The main processor 101 does not directly process information related to graphics and images at this time, but instead provides data from other units to the coprocessor 102 or sends management instructions to the coprocessor 102 to instruct it to retrieve data from other units. After the coprocessor 102 processes the data, the main processor 101 receives the processing result from the coprocessor 102 so that it can make other decisions based on the processing result. For different professional fields, the coprocessor 102 can also be a signal processor, a network communication processor, a complex computing processor, etc. Typically, the hardware implementation of the coprocessor 102 is based on a digital signal processing (DSP) chip, or an application-specific integrated circuit (ASIC) such as a complex programmable logic device (CPLD) or a field-programmable gate array (FPGA).

[0047] Storage medium 103 may include internal and external memory, or it may include volatile and non-volatile memory, or it may include magnetic storage devices, solid-state memory, flash memory, floppy disks, and hard disks, etc. Storage medium 103 can be used to store an operating system (e.g., which may be executed by the main processor 101) and data generated by the operating system during operation, application software programs and data generated by the application software during operation, and software programs of dedicated modules (e.g., which may be executed by a coprocessor 102) and data generated by the program during operation. For example, in one embodiment of the present invention, the main processor 101 executes various functional applications and data processing by running a monitoring program stored in storage medium 103. In some embodiments, storage medium 103 may also be a remote memory (as opposed to a conventional memory) remotely located relative to the main processor 101, and these remote memories can be connected to the main processor 101 or a coprocessor 102 via a network connection (e.g., via a network communication device 105). Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0048] The I / O (Input / Output) unit 104 includes information input devices and information output devices, enabling users to interact with the electronic device 100. Input devices can be used to receive input numerical or character information, and may specifically include: a keyboard, mouse, joystick, touch input device, or trackball, etc. Output devices can be used to output / display the processing results processed by the electronic device 100, which may be based on the information input from the input devices. Specifically, output devices may include: a liquid crystal display (LCD), an organic light-emitting diode (OLED), etc.

[0049] The network communication unit 105 enables communication between the electronic device 100 and various remote devices via a wired / wireless network connection, thereby allowing the electronic device 100 to exchange data with remote devices (e.g., the remote storage device described above). Alternatively, the electronic device 100 can also connect to other electronic devices (e.g., electronic devices with client software installed) via the network communication unit 105, enabling the electronic device 100 to interact with other electronic devices as part of a larger system.

[0050] Other expansion units 106 include various peripheral components and their interfaces, enabling the electronic device 100 to interact with various devices. For example, via a Bluetooth interface, it can connect to a Bluetooth headset, allowing audio played by the electronic device 100 to be received by the Bluetooth headset. Alternatively, via a bus interface (e.g., RS-485 bus), the electronic device 100 can connect to sensors to obtain monitoring data to assist in performing specific functions. In various embodiments, other expansion interfaces 106 can exist independently or be integrated with other components of the electronic device 100. Furthermore, other expansion interfaces 106 are optional, and their optionality is indicated by dashed lines in the figures.

[0051] The present invention also discloses a computer-readable storage medium storing at least one computer instruction, which is loaded and executed by a processor to implement the above-described method.

[0052] The present invention also discloses a computer program product, which includes a computer program / instruction that, when executed by a processor, implements the above-described method.

[0053] It should be noted that all embodiments of the present invention can be implemented in software, hardware, firmware, etc. Regardless of whether the present invention is implemented in software, hardware, or firmware, the instruction code can be stored in any type of computer-accessible memory (e.g., permanent or modifiable, volatile or non-volatile, solid-state or non-solid-state, fixed or replaceable media, etc.). Similarly, the memory can be, for example, Programmable Array Logic (PAL), Random Access Memory (RAM), Programmable Read Only Memory (PROM), Read-Only Memory (ROM), Electrically Erasable Programmable ROM (EEPROM), magnetic disk, optical disk, Digital Versatile Disc (DVD), etc.

[0054] It should be noted that each unit / module mentioned in the various device embodiments of the present invention is a logical unit / module. Physically, a logical unit can be a physical unit, a part of a physical unit, or a combination of multiple physical units. The physical implementation of these logical units themselves is not the most important factor; rather, the combination of functions implemented by these logical units is the key to solving the technical problem proposed by the present invention. Furthermore, to highlight the innovative aspects of the present invention, the above-described device embodiments have not introduced units that are not closely related to solving the technical problem proposed by the present invention. This does not mean that the above-described device embodiments do not contain other units.

[0055] It should be noted that in the claims and specification of this patent, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one" does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0056] Although the invention has been illustrated and described with reference to certain preferred embodiments thereof, those skilled in the art will understand that various changes in form and detail may be made therein without departing from the spirit and scope of the invention.

Claims

1. A method for loading common components or libraries on demand in a front-end microservice, characterized in that, include: Each shared component used by the main application and sub-applications in the aforementioned front-end microservice is constructed as a separate component library; When the main application is loaded, variable a is loaded, and variable a is used to store the storage addresses of the public library and the component library; The variable a and the public method b are mounted on the window object. The public method b loads the corresponding component library or public library according to the specified library name of the component library or public library used by the corresponding sub-application. The sub-application uses the corresponding component library or public library by referencing the specified library name.

2. The method as described in claim 1, characterized in that, The step of attaching the variable a and the public method b to the window object includes attaching the variable a and the public method b through the singleton pattern.

3. The method as described in claim 1, characterized in that, The public method b loads the corresponding component library or public library according to the specified library name of the component library or public library used by the corresponding sub-application, including the public method b indicating the storage address of the component library or public library corresponding to the specified library name in the form of a script tag under the head tag of the page.

4. The method as described in claim 3, characterized in that, The script tag is set to load asynchronously.

5. The method as described in claim 3, characterized in that, The public method b obtains the storage address corresponding to the specified library name from the variable a.

6. The method as described in claim 1, characterized in that, The correspondence between the specified library names of the public library and the component library and the storage address is stored in the configuration file. When the main application is loaded, the correspondence is loaded into the variable a.

7. An electronic device, characterized in that, include: At least one memory for storing computer instructions; At least one processor, when the at least one processor executes the computer instructions, implements the method as described in any one of claims 1-6.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one computer instruction, which is loaded and executed by a processor to implement the method as described in any one of claims 1-6.

9. A computer program product, characterized in that, The computer program product includes a computer program / instruction that, when executed by a processor, implements the method as described in any one of claims 1-6.

Images