Front-end item loading control method and system and electronic equipment

Abstract

The invention provides a front-end project loading control method and system and electronic equipment, and relates to the field of front-end business process process.The method comprises the steps that a modularized loading process is achieved by introducing a network component, and a new front-end project is hosted in an old front-end project in a hosting mode; the new and old front-end projects can be integrated on the premise of not influencing the production environment, so that the system framework of the front-end projects is optimized, and the risk existing in the upgrading process is reduced.

Description

Technical Field

[0001] The present invention relates to the field of front-end business process processing, and in particular to a front-end project loading control method, system and electronic equipment. Background Art

[0002] As front-end projects become increasingly complex, how to maintain them is a difficult problem for operations and maintenance. These front-end projects rely on older tools, such as Webpack and npm, and are difficult to adapt to the rapidly evolving front-end technologies. In particular, when the business needs to integrate new technologies, traditional upgrade methods are difficult to implement, especially when they are widely used in production environments, which may cause unpredictable problems. Therefore, many front-end projects still use older front-end technologies, resulting in a more complex system framework for front-end projects and a higher upgrade risk. Summary of the invention

[0003] In view of this, the purpose of the present invention is to provide a front-end project loading control method, system and electronic device. The method realizes the componentized loading process by introducing network components, and hosts the new front-end project in the old front-end project by hosting. The new and old front-end projects can be integrated without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks in the upgrade process.

[0004] In a first aspect, an embodiment of the present invention provides a front-end project loading control method, the method comprising: Obtain the corresponding loaded second front-end project according to the first front-end project, and build the entry file corresponding to the first front-end project; Create a mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determine a loading strategy based on the mount entry point; Build the network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component; The resources corresponding to the second front-end project in the product catalog are saved in the first front-end project, and the first front-end project is controlled to execute loading based on the loading strategy.

[0005] Optionally, obtaining the corresponding loaded second front-end project according to the first front-end project, and constructing the entry file corresponding to the first front-end project, including: Constructing a first product directory corresponding to the first front-end project, and constructing a first logic file and a first entry file corresponding to the first front-end project based on the first product directory; Determine the second front-end project to be loaded by the first front-end project, and obtain the component name corresponding to the second front-end project; The entry file of the first front-end project is obtained by updating the first entry file with the component name.

[0006] Optionally, creating a mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determining a loading strategy based on the mount entry point includes: Obtain the hypertext markup language file corresponding to the entry file; Determine the tag element corresponding to the hypertext markup language file by using the component name, and mount the tag element to the main tag of the hypertext markup language file to generate a mount entry point; An access path corresponding to the first front-end project is determined according to the component name, and a loading strategy is determined based on the mount entry point and the access path.

[0007] Optionally, build a network component corresponding to the second front-end project, and obtain a product directory corresponding to the network component, including: Determine the export logic parameters corresponding to the second front-end project using the component name, and construct the network components of the second front-end project using the export logic parameters; Construct a second logic file and a second entry file corresponding to the second front-end project based on the network component; Obtain a second product directory corresponding to the second logic file and the second entry file, and determine a product directory corresponding to the network component based on the second product directory.

[0008] Optionally, saving the resources corresponding to the second front-end project in the product catalog to the first front-end project includes: Generate a project folder corresponding to the second front-end project according to the component name; Copy the resources corresponding to the second front-end project in the product directory to the project folder.

[0009] Optionally, controlling the first front-end project to execute loading based on the loading strategy includes: Obtaining a request instruction corresponding to the first front-end project, and determining a routing processor corresponding to the first front-end project after parsing the request instruction; wherein the routing processor is determined based on the first logic file and the second logic file; A loading strategy corresponding to the routing processor is determined, and the loading strategy is used to load the first front-end project according to the corresponding routing processor.

[0010] Optionally, using the loading strategy to load the first front-end project according to the corresponding routing processor includes: Based on the loading strategy, obtaining a first loading strategy corresponding to the first logic file of the routing processor; The first front-end project is controlled to be rendered and loaded according to the first loading strategy.

[0011] Optionally, using the loading strategy to load the first front-end project according to the corresponding routing processor includes: Based on the loading strategy, obtaining a second loading strategy corresponding to the second logic file of the routing processor; According to the second loading strategy, the network component is controlled to perform asynchronous rendering loading in the first front-end project.

[0012] In a second aspect, an embodiment of the present invention provides a front-end project loading control system, the system comprising: An initialization unit, used to obtain a second front-end project corresponding to the first front-end project and construct an entry file corresponding to the first front-end project; A first setting unit is used to create a mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determine a loading strategy based on the mount entry point; A second setting unit is used to build a network component corresponding to the second front-end project and obtain a product directory corresponding to the network component; The merge loading unit is used to save the resources corresponding to the second front-end project in the product catalog to the first front-end project, and control the first front-end project to perform loading based on the loading strategy.

[0013] In a third aspect, an embodiment of the present invention further provides an electronic device, including a processor and a memory, wherein the memory stores computer executable instructions that can be executed by the processor, and the processor executes the computer executable instructions to implement the steps of the front-end project loading control method provided in the first aspect.

[0014] In a fourth aspect, an embodiment of the present invention further provides a storage medium storing computer executable instructions. When the computer executable instructions are called and executed by a processor, the computer executable instructions prompt the processor to implement the steps of the front-end project loading control method provided in the first aspect.

[0015] A front-end project loading control method, system and electronic device provided by the embodiment of the present invention, in the process of loading control of the front-end project, the method first obtains the second front-end project corresponding to the first front-end project according to the first front-end project, and constructs the entry file corresponding to the first front-end project; then creates the mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determines the loading strategy based on the mount entry point; then constructs the network component corresponding to the second front-end project, and obtains the product directory corresponding to the network component; finally, saves the resources corresponding to the second front-end project in the product directory to the first front-end project, and controls the first front-end project to execute loading based on the loading strategy. The method realizes the componentized loading process by introducing network components, and hosts the new front-end project in the old front-end project by hosting, so that the new and old front-end projects can be integrated without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks in the upgrade process.

[0016] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention are realized and obtained by the structures particularly pointed out in the description, claims and drawings.

[0017] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are given below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0019] Figure 1 A flow chart of a front-end project loading control method provided by an embodiment of the present invention; Figure 2 A flowchart of step S101 in a front-end project loading control method provided by an embodiment of the present invention; Figure 3 A flowchart of step S102 in a front-end project loading control method provided by an embodiment of the present invention; Figure 4 A flowchart of step S103 in a front-end project loading control method provided by an embodiment of the present invention; Figure 5 A flow chart of saving resources corresponding to a second front-end project in a product catalog to a first front-end project in a front-end project loading control method provided by an embodiment of the present invention; Figure 6 A flow chart of controlling the execution of loading of a first front-end project based on a loading strategy in a front-end project loading control method provided by an embodiment of the present invention; Figure 7 A flowchart of step S602 in a front-end project loading control method provided by an embodiment of the present invention; Figure 8 A flowchart of step S602 in another front-end project loading control method provided by an embodiment of the present invention; Fig. 9 A flowchart of another front-end project loading control method provided by an embodiment of the present invention; Fig.10 A logical schematic diagram of a front-end project loading control method provided by an embodiment of the present invention; Fig.11 A schematic diagram of the structure of a front-end project loading control system provided by an embodiment of the present invention; Fig.12 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention.

[0020] icon: 1110-initialization unit; 1120-first setting unit; 1130-second setting unit; 1140-merge loading unit; 101 - processor; 102 - memory; 103 - bus; 104 - communication interface. DETAILED DESCRIPTION

[0021] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution of the present invention will be clearly and completely described in combination with the embodiments below. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0022] In the context of increasingly complex front-end project engineering, how to maintain it is a difficult problem on the operation and maintenance side. These front-end projects rely on older tools, such as Webpack and npm, and it is difficult to adapt to the rapidly developing front-end technology. Especially when the business needs to integrate new technologies, traditional upgrade methods are difficult to implement, especially when they are widely used in production environments, which may bring unpredictable problems. Therefore, many front-end projects still use older front-end technologies, resulting in a more complex system framework for front-end projects and a higher upgrade risk. Based on this, the present invention provides a front-end project loading control method, system and electronic device, which realizes a componentized loading process by introducing network components, and hosts the new front-end project in the old front-end project by hosting, so that the new and old front-end projects can be integrated without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the upgrade risk.

[0023] To facilitate understanding of this embodiment, a front-end project loading control method disclosed in an embodiment of the present invention is first described in detail. Figure 1 As shown, the method comprises the following steps: Step S101, obtaining a second front-end project corresponding to the first front-end project, and constructing an entry file corresponding to the first front-end project; Step S102, creating a mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determining a loading strategy based on the mount entry point; Step S103, constructing a network component corresponding to the second front-end project, and obtaining a product catalog corresponding to the network component; Step S104, saving the resources corresponding to the second front-end project in the product catalog to the first front-end project, and controlling the first front-end project to perform loading based on the loading strategy.

[0024] The first front-end project in this solution can be understood as the old front-end project, and the second front-end project is the new front-end project. The second front-end project needs to be embedded in the first front-end project for display. In this process, a closed architecture needs to be adopted to isolate the second front-end project so that it can be isolated from the first front-end project in terms of business logic. Therefore, after determining the first front-end project and the second front-end project, first build the entry file corresponding to the first front-end project. The entry file can be used as the start page of the first front-end project and called through a specific path to execute the front-end project loading process.

[0025] After the entry file is obtained, the second front-end project needs to be mounted, and its specific mount port is created in the entry file using the specific attributes or parameters of the second front-end project, and the subsequent loading strategy is obtained through the mount port. Then the second front-end project needs to be built, and the closed isolation of the second front-end project is achieved by building its corresponding network components. For example, the network component can be implemented using Web Component. By introducing Web Component, the componentization of the second front-end project can be achieved, which enables the coexistence of new and old technologies. After obtaining the product directory corresponding to the network component, obtain the resources corresponding to the second front-end resources in the directory, save them in the corresponding path of the first front-end directory, and use the corresponding loading strategy to load the first front-end project.

[0026] Optionally, according to the first front-end project, the second front-end project corresponding to the first front-end project is obtained, and the entry file corresponding to the first front-end project is constructed in step S101, such as Figure 2 As shown, including: Step S201, constructing a first product directory corresponding to a first front-end project, and constructing a first logic file and a first entry file corresponding to the first front-end project based on the first product directory; Step S202, determining the second front-end project to be loaded by the first front-end project, and obtaining the component name corresponding to the second front-end project; Step S203, after updating the first entry file with the component name, an entry file of the first front-end project is obtained.

[0027] The first front-end project is an existing front-end project. During its loading and building process, the first product directory corresponding to the first front-end project is first built, recorded as build; then the first logic file app.js and the first entry file index.html corresponding to the first front-end project are built in the first product directory; at this time, the full path of the first logic file is / build / app.js, and the full path of the first entry file is / build / index.html.

[0028] After the first front-end project is built, the second front-end project that needs to be loaded is obtained, and its corresponding component name my_app is determined. After the component name is determined, it is updated to the first entry file index.html, thereby completing the construction of all products under the build path in the first front-end project.

[0029] On this basis, a mount entry point corresponding to the second front-end project is created based on the second front-end project control entry file, and a loading strategy is determined based on the mount entry point in step S102, such as Figure 3 As shown, including: Step S301, obtaining a hypertext markup language file corresponding to the entry file; Step S302, using the component name to determine the tag element corresponding to the hypertext markup language file, and mounting the tag element to the main tag of the hypertext markup language file to generate a mounting entry point; Step S303: determine the access path corresponding to the first front-end project according to the component name, and determine the loading strategy based on the mount entry point and the access path.

[0030] The entry file at this time is the first entry file index.html, which is essentially an HTML file. Therefore, after obtaining the hypertext markup language file corresponding to the entry file, use the component name to get the corresponding tag element in the HTML file, and mount it to the main tag to generate a mounting entry point. In actual operation, this can be achieved through document.createElement("my_app") in javascript, and then the tag element corresponding to my_app is created. <myapp / > Place it in the body tag of HTML to generate the mounting entry point.

[0031] After the mount entry point is determined, the component name is used to determine the access path corresponding to the first front-end project, thereby generating different loading strategies. Specifically, the access path is the original path and the new path containing the component name, and different loading strategies are adopted according to the different paths, that is, the loading strategy corresponding to the first front-end project under the original path, and the loading strategy corresponding to the second front-end project under the new path.

[0032] Optionally, step S103 of building a network component corresponding to the second front-end project and obtaining a product catalog corresponding to the network component is as follows: Figure 4 As shown, including: Step S401, determining the export logic parameters corresponding to the second front-end project using the component name, and constructing the network components of the second front-end project using the export logic parameters; Step S402, constructing a second logic file and a second entry file corresponding to the second front-end project based on the network component; Step S403, obtaining the second product directory corresponding to the second logic file and the second entry file, and determining the product directory corresponding to the network component based on the second product directory.

[0033] Taking Web Component as an example, the second front-end project corresponds to a new project of Web Component. First, the component name is used to determine the export logic parameters corresponding to the second front-end project, and then the parameters are used to build the WebComponent of the second front-end project, so as to create the component name in the export logic of the project, which is specifically achieved through the following method: customElements.define("my-app", MyApp); my-app.

[0034] After the Web Component of the second front-end project is built, its corresponding second logic file my_app.js and second product directory index2.html are built based on the project, and its corresponding second product directory build is obtained, so as to build the product directory build of the Web Component, which includes / build / my_app.js and / build / index.html respectively.

[0035] Optionally, the resources corresponding to the second front-end project in the product catalog are saved to the first front-end project, such as Figure 5 As shown, including: Step S501, generating a project folder corresponding to the second front-end project according to the component name; Step S502, copy the resources corresponding to the second front-end project in the product catalog to the project folder.

[0036] In the process of saving resources, you need to generate the project folder my_app corresponding to the second front-end directory according to the component name, and copy the resources corresponding to the second front-end directory in the product directory to the project folder. At this time, in the first front-end directory, its build directory contains: / build / app.js, / build / index.html, / build / my_app / my_app.js, / build / my_app / index.html, / build / my_app.

[0037] Optionally, the first front-end project is controlled to execute loading based on the loading strategy, such as Figure 6 As shown, including: Step S601, obtaining a request instruction corresponding to a first front-end project, and determining a routing processor corresponding to the first front-end project after parsing the request instruction; wherein the routing processor is determined based on a first logic file and a second logic file; Step S602: determine the loading strategy corresponding to the routing processor, and use the loading strategy to load the first front-end project according to the corresponding routing processor.

[0038] In the process of controlling the loading of the first front-end directory based on the loading strategy, it is necessary to combine its specific routing processor to realize the loading of the first front-end project, and the routing processor is mainly determined by the first logic file app.js and the second logic file my_app.js. When the routing processor corresponds to the first logic file app.js, the access path corresponding to the loading strategy is http: / / localhost / ; when the routing processor corresponds to the second logic file my_app.js, the access path corresponding to the loading strategy is http: / / localhost / my_app. After the loading strategy is determined, the first front-end project can be loaded according to the logic contained in the corresponding routing processor. It should be noted that the above-mentioned http: / / localhost / and http: / / localhost / my_app are both local virtual access paths, and do not involve access to external networks. The above access paths involved later are all the same and will not be repeated.

[0039] Optionally, the step S602 of loading the first front-end project is performed according to the corresponding routing processor using the loading strategy, such as Figure 7 As shown, including: Step S701, based on the loading strategy, obtaining a first loading strategy corresponding to a first logic file of a routing processor; Step S702: Control the first front-end project to perform rendering loading according to the first loading strategy.

[0040] At this time, the loading strategy corresponds to the first logical file app.js. As the first loading strategy, the access path is http: / / localhost / . When the user requests the http: / / localhost / path through the browser, the corresponding first loading strategy in app.js is executed, and the components in the first front-end project are rendered and output to the browser page.

[0041] Optionally, the step S602 of loading the first front-end project is performed according to the corresponding routing processor using the loading strategy, such as Figure 8 As shown, including: Step S801, based on the loading strategy, obtaining a second loading strategy corresponding to a second logic file of the routing processor; Step S802: Control the network component to perform asynchronous rendering loading in the first front-end project according to the second loading strategy.

[0042] At this time, the loading strategy corresponds to the second logical file my_app.js. As the second loading strategy, the access path is http: / / localhost / my_app. When the user requests this path through the browser, the route processor corresponding to app.js can also be triggered first to determine whether the Web Component component is included. If not, the components in the first front-end project are directly rendered and output to the browser page; if the above components are included, the second front-end project is rendered in the first front-end project as a new project. Specifically, the my_app.js file can be asynchronously loaded, the corresponding second loading strategy in my_app.js is executed, and the asynchronous rendering and loading process is implemented based on the Web Component, and finally the screen is output to the browser page.

[0043] The above process is specific Fig.10 When the user accesses the URL of the browser, to start the old project, the user needs to access the old project http: / / localhost / (the homepage of the old project), and the user accesses the old project specific route http: / / localhost / my_app (the route address of the new embedded module).

[0044] The user loads the file my_app.js of the web component construction product through xhr (asynchronous loading technology) according to the access path / my_app. After the monitoring script is loaded, the business logic of index.html is executed. The my_app.js file will initialize the page, call the browser's drawing view API, and draw the interface, thus realizing the on-demand asynchronous loading of independent applications based on web components.

[0045] When the user returns to http: / / localhost / (the homepage of the old project), the user leaves the / my_app page, and the leave and destruction operations are implemented inside my_app.js, thus completing the entire life cycle of the web component-based component.

[0046] like Fig. 9 The flowchart of another front-end project loading control method based on the Web Component solution is shown in the figure. The name of the front-end project 2 in the figure is app2, which contains react 16 and other components, such as antd5, reactflow, node_modules, etc. The project based on the new web component architecture is named my_app, which also contains react 16 and other components, such as antd5, reactflow, node_modules, etc. The two are packaged by webpack to generate the corresponding product directory build. The build in app2 contains app.js and index.html; the build in my_app contains my_app.js and index.html, and my_app.js is the logic file corresponding to the web component.

[0047] Then, rename the build in my_app to the my_app directory, and copy all the resources in the directory to the build directory in app2. At this time, the build in app2 contains all the resources of my_app. Static resource services are provided by ngnix, so that users can load the resources corresponding to app2 and my_app when accessing index.html. It can be seen that this solution starts a new project based on the latest front-end framework version while maintaining the operation of the old framework, organizes and builds the new project using web components, and hosts the input products after the build on the nodes of the old framework in a boarding manner.

[0048] Normally, Web Component technology is only used as a closed and isolated component under the same project, and is not used as a mixed embedding form between multiple projects. Using this technical architecture allows old projects to use newer technologies for mixed embedding, thereby greatly reducing the problem of old projects being unable to be mixed due to their heavy technical burden.

[0049] Traditionally, Web Component does not use the features of Shadow Dom to encapsulate component scopes. This solution solves the problem of some style public domain conflicts when new technology projects are embedded in old projects. Although the existing iframe can also achieve page rendering and isolate related applications, the iframe has a slow loading speed. Each time an iframe is created, it is necessary to initialize the loading time of the entire doc document, and two threads are used to load the application. In addition, the pop-up window of the iframe cannot display the entire html doc body area and will be separated by the sidebar area of ​​the application. This solution can avoid the above problems.

[0050] Each module based on Web Component in this solution can be independently packaged into an app.js file, and multiple app.js files can be assembled into an interface. This can also be understood as a new micro-frontend solution. Each module is developed by an independent team without interfering with each other. Moreover, each module can be loaded on demand. For example, when a user enters a URL, the independent sub-application to be loaded is determined based on the input path, thereby achieving the effect of improving the loading speed of the first screen.

[0051] It can be seen from the front-end project loading control method described in the above embodiment that this method realizes the componentized loading process by introducing network components, and hosts the new front-end project in the old front-end project by hosting. It can integrate the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks in the upgrade process.

[0052] Corresponding to the above-mentioned front-end project loading control method embodiment, the embodiment of the present invention also provides a front-end project loading control system, such as Fig.11 As shown, the system includes: The initialization unit 1110 is used to obtain the second front-end project corresponding to the first front-end project and construct an entry file corresponding to the first front-end project; The first setting unit 1120 is used to create a mount entry point corresponding to the second front-end project based on the second front-end project control entry file, and determine a loading strategy based on the mount entry point; The second setting unit 1130 is used to build a network component corresponding to the second front-end project and obtain a product directory corresponding to the network component; The merge loading unit 1140 is used to save the resources corresponding to the second front-end project in the product catalog to the first front-end project, and control the first front-end project to perform loading based on the loading strategy.

[0053] From the front-end project loading control system mentioned in the above embodiment, it can be seen that the system realizes the componentized loading process by introducing network components, and hosts the new front-end project in the old front-end project by hosting. It can integrate the new and old front-end projects without affecting the production environment, thereby optimizing the system framework of the front-end project and reducing the risks in the upgrade process.

[0054] The front-end project loading control system provided in the embodiment of the present invention has the same implementation principle and technical effects as those of the aforementioned front-end project loading control method embodiment. For the sake of brief description, for parts not mentioned in the method embodiment, reference may be made to the corresponding contents in the aforementioned front-end project loading control method embodiment.

[0055] This embodiment also provides an electronic device. The structural diagram of the electronic device is as follows: Fig.12 As shown, the device includes a processor 101 and a memory 102; wherein the memory 102 is used to store one or more computer instructions, and the one or more computer instructions are executed by the processor to implement the steps of the above-mentioned front-end project loading control method.

[0056] Fig.12 The electronic device shown further includes a bus 103 and a communication interface 104 , and the processor 101 , the communication interface 104 and the memory 102 are connected via the bus 103 .

[0057] The memory 102 may include a high-speed random access memory (RAM), and may also include a non-volatile memory, such as at least one disk storage. The bus 103 may be an ISA bus, a PCI bus, or an EISA bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig.12 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0058] The communication interface 104 is used to connect to at least one user terminal and other network units through a network interface, and send the encapsulated IPv4 message or IPv4 message to the user terminal through the network interface.

[0059] The processor 101 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the hardware integrated logic circuit or software instructions in the processor 101. The above processor 101 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The disclosed methods, steps and logic block diagrams in the embodiments of the present disclosure can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiments of the present disclosure can be directly embodied as a hardware decoding processor for execution, or a combination of hardware and software modules in the decoding processor for execution. The software module may be located in a storage medium mature in the art, such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory 102, and the processor 101 reads the information in the memory 102 and completes the steps of the method of the above embodiment in combination with its hardware.

[0060] An embodiment of the present invention further provides a storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of the front-end project loading control method in the aforementioned embodiment are executed.

[0061] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. The device embodiments described above are merely schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some communication interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0062] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0063] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0064] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a non-volatile computer-readable storage medium that is executable by a processor. Based on this understanding, the technical solution of the present invention can essentially or partly contribute to the prior art or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, electronic device, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present invention. The aforementioned storage media include: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, and other media that can store program codes.

[0065] Finally, it should be noted that the above-described embodiments are only specific implementations of the present invention, which are used to illustrate the technical solutions of the present invention, rather than to limit them. The protection scope of the present invention is not limited thereto. Although the present invention is described in detail with reference to the above-described embodiments, ordinary technicians in the field should understand that any technician familiar with the technical field can still modify the technical solutions recorded in the above-described embodiments within the technical scope disclosed by the present invention, or can easily think of changes, or make equivalent replacements for some of the technical features therein; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. A front-end project loading control method, characterized in that: The method comprises: Obtain the corresponding loaded second front-end project according to the first front-end project, and construct the entry file corresponding to the first front-end project; Controlling creation of a mount entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determining a loading strategy based on the mount entry point; Build a network component corresponding to the second front-end project, and obtain a product directory corresponding to the network component; The resources corresponding to the second front-end project in the product catalog are saved in the first front-end project, and the first front-end project is controlled to perform loading based on the loading strategy.

2. The front-end project loading control method according to claim 1, characterized in that: Obtaining the corresponding loaded second front-end project according to the first front-end project, and constructing the entry file corresponding to the first front-end project, including: Constructing a first product directory corresponding to the first front-end project, and constructing a first logic file and a first entry file corresponding to the first front-end project based on the first product directory; Determine a second front-end project to be loaded by the first front-end project, and obtain a component name corresponding to the second front-end project; The entry file of the first front-end project is obtained by updating the first entry file with the component name.

3. The front-end project loading control method according to claim 2, characterized in that: Controlling the creation of a mount entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determining a loading strategy based on the mount entry point, including: Obtaining a hypertext markup language file corresponding to the entry file; Determine the tag element corresponding to the hypertext markup language file by using the component name, and mount the tag element into the main tag of the hypertext markup language file to generate the mount entry point; An access path corresponding to the first front-end project is determined according to the component name, and the loading strategy is determined based on the mount entry point and the access path.

4. The front-end project loading control method according to claim 2, characterized in that: Build the network component corresponding to the second front-end project, and obtain the product directory corresponding to the network component, including: Determine the export logic parameters corresponding to the second front-end project by using the component name, and construct the network component of the second front-end project by using the export logic parameters; Building a second logic file and a second entry file corresponding to the second front-end project based on the network component; Obtain the second product directory corresponding to the second logic file and the second entry file, and determine the product directory corresponding to the network component based on the second product directory.

5. The front-end project loading control method according to claim 4, characterized in that: Saving the resources corresponding to the second front-end project in the product catalog to the first front-end project includes: Generate a project folder corresponding to the second front-end project according to the component name; The resources corresponding to the second front-end project in the product catalog are copied to the project folder.

6. The front-end project loading control method according to claim 5, characterized in that: Controlling the first front-end project to execute loading based on the loading strategy includes: Obtaining a request instruction corresponding to the first front-end project, and determining a routing processor corresponding to the first front-end project after parsing the request instruction; wherein the routing processor is determined based on the first logic file and the second logic file; The loading strategy corresponding to the routing processor is determined, and the loading strategy is used to load the first front-end project according to the corresponding routing processor.

7. The front-end project loading control method according to claim 6, characterized in that: The first front-end project is loaded using the loading strategy according to the corresponding routing processor, including: Based on the loading strategy, obtaining a first loading strategy of the routing processor corresponding to the first logic file; The first front-end project is controlled to be rendered and loaded according to the first loading strategy.

8. The front-end project loading control method according to claim 6, characterized in that: The first front-end project is loaded using the loading strategy according to the corresponding routing processor, including: Based on the loading strategy, obtaining a second loading strategy corresponding to the second logic file of the routing processor; According to the second loading strategy, the network component is controlled to perform asynchronous rendering loading in the first front-end project.

9. A front-end project loading control system, characterized in that: The system comprises: An initialization unit, used to obtain a second front-end project corresponding to the first front-end project and construct an entry file corresponding to the first front-end project; A first setting unit, configured to control the creation of a mount entry point corresponding to the second front-end project in the entry file based on the second front-end project, and determine a loading strategy based on the mount entry point; A second setting unit is used to build a network component corresponding to the second front-end project and obtain a product directory corresponding to the network component; The merging loading unit is used to save the resources corresponding to the second front-end project in the product catalog to the first front-end project, and control the first front-end project to perform loading based on the loading strategy.

10. An electronic device, characterized in that: It comprises a processor and a memory, wherein the memory stores computer executable instructions that can be executed by the processor, and the processor executes the computer executable instructions to implement the steps of the front-end project loading control method described in any one of claims 1 to 8.

Images