CN117193880A - Code loading method, device and equipment of application program and storage medium - Google Patents
Code loading method, device and equipment of application program and storage medium Download PDFInfo
- Publication number
- CN117193880A CN117193880A CN202311213031.0A CN202311213031A CN117193880A CN 117193880 A CN117193880 A CN 117193880A CN 202311213031 A CN202311213031 A CN 202311213031A CN 117193880 A CN117193880 A CN 117193880A
- Authority
- CN
- China
- Prior art keywords
- code
- loading
- application program
- packet
- split
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 285
- 230000011218 segmentation Effects 0.000 claims abstract description 81
- 230000006870 function Effects 0.000 claims description 46
- 238000000034 method Methods 0.000 claims description 39
- 238000005192 partition Methods 0.000 claims description 20
- 238000009877 rendering Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 7
- 238000004378 air conditioning Methods 0.000 claims description 4
- 230000003111 delayed effect Effects 0.000 abstract description 7
- 238000012545 processing Methods 0.000 abstract description 7
- 230000008569 process Effects 0.000 description 6
- 238000004891 communication Methods 0.000 description 5
- 230000004044 response Effects 0.000 description 5
- 238000000638 solvent extraction Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000009286 beneficial effect Effects 0.000 description 3
- 230000014509 gene expression Effects 0.000 description 3
- 230000008676 import Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Data Exchanges In Wide-Area Networks (AREA)
Abstract
The application belongs to the field of data processing, and relates to a code loading method of an application program, which comprises the steps of obtaining an application program code to be segmented, wherein the application program code is configured with a plurality of code name attributes and code segmentation attributes; identifying a segmentation point of the application code based on the code segmentation rule and the code name attribute; dividing the application program code according to the dividing points by utilizing the code dividing attribute to obtain a plurality of divided code packages; judging whether an asynchronous loading code packet in a plurality of divided code packets belongs to a routing scene or not; if the code packet belongs to the code packet, carrying out delay loading on the code packet by using a routing component to obtain a loading front-end page of the code packet; and if the code packet does not belong to the code packet, carrying out delayed loading on the code packet by utilizing the high-order component to obtain a loading front page of the code packet. The application also provides a code loading device of the application program, computer equipment and a storage medium. The application can improve the code loading efficiency and the user experience.
Description
Technical Field
The present application relates to the field of data processing technologies, and in particular, to a method, an apparatus, a device, and a storage medium for loading codes of an application program.
Background
Code loading refers to the process of loading the code of an application to expose the front page of the application. The traditional code loading method is to compile the code of the application program to obtain an executable file, and then to load javascript on the executable file.
However, since all the codes of the application program are packaged in one JS file, this method causes the following problems in the loading process of the codes of the application program:
1. the page loading time is too long, and the user experience is poor;
2. the browser needs to load a large amount of codes, occupies excessive memory, and certain functions in the application program can be used only in a specific scene, but are packaged in one js file, so that resource waste is caused, and the code loading efficiency is lower.
Disclosure of Invention
The application provides a code loading method, device, equipment and storage medium of an application program, and the main purpose of the method, device, equipment and storage medium is to improve the code loading efficiency and user experience.
In order to solve the above technical problems, an embodiment of the present application provides a code loading method for an application program, which adopts the following technical scheme:
Acquiring an application program code to be segmented, wherein the application program code is configured with a plurality of code name attributes and code segmentation attributes;
identifying the dividing points of the application program codes based on a preset code dividing rule and the code name attribute;
dividing the application program code by utilizing the code division attribute according to the division point to obtain a plurality of divided code packages, wherein the divided code packages comprise asynchronous loading code packages;
judging whether an asynchronous loading code packet in the plurality of divided code packets belongs to a routing scene or not;
if the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front-end page of the split code packet;
and if the asynchronous loading code packet does not belong to the routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet.
Further, the code division rule includes a code name rule, a request rule, and a cache rule, and the step of identifying the division point of the application program code based on the preset code division rule and the code name attribute includes the following steps:
Identifying an asynchronous loading code critical value, a code reference number value, a maximum code file value and a minimum code file value which need to be segmented from the application program code based on the code name rule and the code name attribute as a first segmentation point;
identifying the maximum asynchronous loading request number, the maximum initial loading request number and the naming separator which need to be divided from the application program code based on the request rule as a second division point;
identifying a first cache group and a second cache group which need to be segmented from the application program code based on the cache rule as a third segmentation point;
and merging the first partition point, the second partition point and the third partition point to serve as partition points of the application program code.
Further, before the step of identifying the first cache set and the second cache set to be partitioned from the application program code based on the cache rule in the code partition rule as a third partition point, the method further includes the steps of:
traversing a plurality of code modules to be segmented in the application program code based on the caching rule;
matching each code module to the corresponding first cache set or second cache set;
When the code module can be matched with the first cache group and the second cache group at the same time, identifying the priority of the cache group of the code module;
and when the priority of the cache group is the first priority, the code module is distributed to the first cache group, and when the priority of the cache group is the second priority, the code module is distributed to the second cache group.
Further, the performing delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet includes:
dynamically importing the split code packet into a first delay loading component by utilizing a loading function in the routing component;
and carrying out asynchronous rendering on the first delay loading assembly, and loading the asynchronously rendered first delay loading assembly by utilizing a routing function in the routing assembly to obtain a loading front-end page of the split code packet.
Further, the performing delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet includes:
identifying a code package state of the partitioned code package using a state function in the higher-order component;
When the code packet state is an asynchronous loading state, asynchronously loading the split code packet through the high-order component to obtain a loading front-end page of the split code packet;
when the code packet state is a delay loading state, encapsulating the split code packet into a second delay loading component;
rendering the second delay loading component, and loading the rendered segmentation code package by calling a higher-order function in the higher-order component to obtain a loading front-end page of the segmentation code package.
Further, the dividing the application program code according to the dividing point by using the code dividing attribute to obtain a plurality of divided code packages, including:
according to the segmentation points, the application program codes are initially segmented by utilizing the code segmentation attributes, so that a plurality of initial segmentation code packages are obtained;
and converting the plurality of initial segmentation code packets by using a preset converter and a grammar plug-in to obtain the plurality of segmentation code packets meeting preset loading conditions.
Further, the determining whether the asynchronously loaded code packet in the plurality of partitioned code packets belongs to a routing scenario includes:
Identifying the page function of the asynchronous loading code packet, and judging whether the page function belongs to the routing scene or not based on a preset scene rule;
when the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
when the page function belongs to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets belongs to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset routing component to obtain a loading front-end page of the divided code packets;
and when the asynchronous loading code packet does not belong to a routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
and when the page function does not belong to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets does not belong to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset high-order component to obtain a loading front-end page of the divided code packets.
In order to solve the above technical problems, the embodiments of the present application further provide a code loading device for an application program, which adopts the following technical scheme:
the system comprises an acquisition module, a code segmentation module and a code segmentation module, wherein the acquisition module is used for acquiring application program codes to be segmented, and the application program codes are configured with a plurality of code name attributes and code segmentation attributes;
the identification module is used for identifying the division points of the application program codes based on a preset code division rule and the code name attribute;
the segmentation module is used for segmenting the application program code by utilizing the code segmentation attribute according to the segmentation point to obtain a plurality of segmentation code packages, wherein the segmentation code packages comprise asynchronous loading code packages;
the judging module is used for judging whether the asynchronous loading code packet in the plurality of divided code packets belongs to a routing scene or not; a kind of electronic device with high-pressure air-conditioning system
The loading module is used for carrying out delay loading on the split code packet by utilizing a preset routing component if the asynchronous loading code packet belongs to a routing scene, so as to obtain a loading front-end page of the split code packet; and if the asynchronous loading code packet does not belong to the routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet.
In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical schemes:
a memory storing at least one computer program; a kind of electronic device with high-pressure air-conditioning system
And the processor executes the computer program stored in the memory to realize the code loading of the application program.
In order to solve the above technical problems, an embodiment of the present application further provides a computer readable storage medium, which adopts the following technical schemes:
the computer readable storage medium has stored therein at least one computer program that is executed by a processor in an electronic device to effect code loading of the application program described above.
Compared with the prior art, the application has the following main beneficial effects:
in the embodiment of the application, the segmentation points of the application program code are identified based on the preset code segmentation rule and the code name attribute, the application program code is segmented according to the segmentation points by utilizing the code segmentation attribute to obtain a plurality of segmentation code packages, the application program code can be segmented into a plurality of independent code packages according to the needs, and the subsequent loading is carried out when the application program code is needed, so that the initial loading time and the memory usage amount of a page are reduced, the subsequent code loading efficiency and the page response efficiency are improved, and the asynchronous loading of the segmentation code packages can be realized by carrying out route loading and non-route delay loading on the asynchronous loading code packages, and the code packages of the route page are loaded only when the page is loaded by the route, so that the resource occupation amount of the page is reduced, and the code loading efficiency and the user experience are improved. Therefore, the code loading method, the device, the equipment and the storage medium of the application program can improve the code loading efficiency and the user experience.
Drawings
In order to more clearly illustrate the solution of the present application, a brief description will be given below of the drawings required for the description of the embodiments of the present application, it being apparent that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without the exercise of inventive effort for a person of ordinary skill in the art.
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow chart of one embodiment of a method of code loading of an application according to the present application;
FIG. 3 is a block diagram of one embodiment of the programmatic application of the code loading system of the present application;
FIG. 4 is a schematic structural diagram of one embodiment of a computer device in accordance with the present application.
Detailed Description
The method for determining a data format provided in the embodiments of the present application is applied to a data processing system, and unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present application pertains; the terminology used in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description of the application and the claims and the description of the drawings above are intended to cover a non-exclusive inclusion. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
In order to make the person skilled in the art better understand the solution of the present application, the technical solution of the embodiment of the present application will be clearly and completely described below with reference to the accompanying drawings.
As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as a web browser application, a shopping class application, a search class application, an instant messaging tool, a mailbox client, social networking platform software, etc., may be installed on the terminal devices 101, 102, 103.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablet computers, electronic book readers, MP3 players (Moving Picture Experts Group Audio Layer III, dynamic video expert compression standard audio plane 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic video expert compression standard audio plane 4) players, laptop and desktop computers, and the like.
The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.
It should be noted that, the method for loading the code of the application program provided by the embodiment of the present application is generally executed by the server/terminal device, and accordingly, the code loading system of the application program is generally set in the server/terminal device.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continued reference to FIG. 2, a flow chart of one embodiment of a method of code loading for an application in accordance with the present application is shown. The code loading method of the application program comprises the following steps:
S210, acquiring application program codes to be segmented, wherein the application program codes are configured with a plurality of code name attributes and code segmentation attributes.
In the embodiment of the application, the application program code to be segmented refers to program code in a single-page Web application (SPA, single page Web application), and the application program code is packaged in a JS file. The code name attribute functions to identify the code locations in the application code that need to be split, typically strings of [ name ] and [ id ] placeholders. The code segmentation attribute is used for automatically segmenting the application program code, and is usually an output. ChunkFilename attribute and an optimization. Split Chunks attribute, wherein the output. ChunkFilename attribute is used for generating independent code blocks of the application program code according to character strings of [ name ] and [ id ] placeholders; the optimization, split chunks attribute is used for generating independent code blocks for the application program code according to the subsequent code segmentation rules, and packaging each code block into a corresponding js file.
S220, identifying the division points of the application program codes based on a preset code division rule and the code name attribute.
In the embodiment of the application, the preset code segmentation rule is determined based on an actual application scene and comprises a code name rule, a request rule and a cache rule, wherein the code segmentation rule can be generated through an import function of ES 6. The partitioning points function as location information identifying the need for partitioning in the application code.
As one embodiment of the present application, the code division rule includes a code name rule, a request rule, and a cache rule, and the step of identifying the division point of the application program code based on a preset code division rule and the code name attribute includes the steps of:
identifying an asynchronous loading code critical value, a code reference number value, a maximum code file value and a minimum code file value which need to be segmented from the application program code based on the code name rule and the code name attribute as a first segmentation point;
identifying the maximum asynchronous loading request number, the maximum initial loading request number and the naming separator which need to be divided from the application program code based on the request rule as a second division point;
identifying a first cache group and a second cache group which need to be segmented from the application program code based on the cache rule as a third segmentation point;
And merging the first partition point, the second partition point and the third partition point to serve as partition points of the application program code.
Wherein the code rules include chunks async (asynchronous load), minSize (minimum code file value), maxSize (maximum code file value), minChunks (code reference number) rules, when chunks async is identified in the application code: representing that only asynchronously loaded codes are segmented, wherein async is an asynchronously loaded code critical value; when MinSize20000 is identified in the application code: representing that only code blocks of the application code greater than 20KB are segmented, 20000 representing the minimum code file value; when maxSize 0 is identified in the application code: indicating that the maximum code file value has no size limitation; when MinChunks 1 is identified in the application code: indicating that the application code is only split by referencing at least 1 time, 1 being the code reference number.
In the embodiment of the application, based on the request rule including MaxAsyncRequests (maximum asynchronous request number), maxAsyncRequests (maximum initial load request number), umamaticNameDelimiter (naming separator), when MaxAsyncRequests 30 are identified in the application code: representing a maximum of 30 asynchronously loaded code blocks generated per partition, 30 representing a maximum number of asynchronous requests; when MaxAsyncRequests 30 are identified in the application code: representing a maximum of 30 initial load code blocks generated per partition, 30 representing a maximum initial load request number; when Umamatica NameDelimiter '-') is identified in the application code: connectors representing a plurality of file names in the application code, and 'to' represent naming separators.
In an embodiment of the present application, the caching rules may be configured by a caching group, and function to put similar modules in the application code into a cache set. For example, the render cache set indicates that all modules from the node_modules directory are placed in a file named render. Js, and the default cache set indicates that all re-referenced modules are placed in a file named common. Js to implement the configuration of the cache set. Wherein the caching rules comprise a first caching group (vendors caching group) and a second caching group (default caching group).
Further, before the step of identifying the first cache set and the second cache set to be partitioned from the application program code as the third partition point based on the cache rule in the code partition rule, the method further includes the following steps:
traversing a plurality of code modules to be segmented in the application program code based on the caching rule;
matching each code module to the corresponding first cache set or second cache set;
when the code module can be matched with the first cache group and the second cache group at the same time, identifying the priority of the cache group of the code module;
And when the priority of the cache group is the first priority, the code module is distributed to the first cache group, and when the priority of the cache group is the second priority, the code module is distributed to the second cache group.
The modules which are matched through the regular expression/[ \/] node_modules [ \/]/are all modules under the node_modules directory in the application program code, and all modules under the directory are matched with a first cache group (Vendors cache group); and allocating matched modules in the application program codes to a second cache set (default cache set) by utilizing preset rules. For example, there is a rule of MinChunks 2: means a module referenced by at least two modules specified in the application code; or (b)
ReuseExistingChunk ture: indicating that if there is already a module matching a module in the second cache set, multiplexing the module and allocating the module to the second cache set.
In the embodiment of the application, in the module matching process, the condition that some modules are matched with two cache groups simultaneously exists in the application program code, the priority of the first cache group and the second cache group can be set through the priority function, and the modules are distributed to the cache groups with high priority.
For example, the priority of the vendors cache set is a first priority of-10, and the priority of the default cache set is a second priority of-20; if a module matches both the vendor cache set and the default cache set, the module will be assigned to the vendor cache set of the first priority.
In the embodiment of the application, when the code modules can be matched with the first cache group and the second cache group at the same time, the priority of the cache group of the code modules is identified, and when one module is matched with two cache groups at the same time, the cache group with high priority can be selected, so that the modules are ensured to be correctly distributed into the corresponding code blocks, the generation of repeated code blocks is avoided, and the reusability of codes is improved.
S230, dividing the application program code by utilizing the code division attribute according to the division point to obtain a plurality of divided code packages, wherein the divided code packages comprise asynchronous loading code packages.
In the embodiment of the present application, the code division package refers to dividing an application code packaged into a JS file into a plurality of JS file code packages, dividing the application code into a plurality of code blocks (chunks) by using weback based on code division attributes output.
In the embodiment of the application, the asynchronously loaded code packet is a code packet needing to be loaded in a delayed manner, and is loaded only when needed.
As one embodiment of the present application, the partitioning the application code according to the partitioning point by using the code partitioning attribute, to obtain a plurality of partitioned code packages, includes:
according to the segmentation points, the application program codes are initially segmented by utilizing the code segmentation attributes, so that a plurality of initial segmentation code packages are obtained;
and converting the plurality of initial segmentation code packets by using a preset converter and a grammar plug-in to obtain the plurality of segmentation code packets meeting preset loading conditions.
The method comprises the steps of determining a segmentation position of an application program code according to a segmentation point, and segmenting the application program code by utilizing Webpack based on the segmentation position and a code segmentation attribute to obtain a plurality of initial segmentation code packages (namely a plurality of js files).
In an embodiment of the present application, the preset converter may be a barbel-loader converter, and the initial segmentation code packet may be loaded into a code meeting the requirement of front-end page display by using the converter. The converter can be configured by test, exclude, use and options attributes, and test attributes are used for matching files needing to use code package loading rules, such as using regular expressions/\. Js $/matching all files ending with. Js; the include attribute is used to exclude files that do not require the use of code package loading rules, such as using regular expressions/node_modules/excluding all files under the node_modules directory; the use attribute is used to specify which translator to load with, such as with a babel-loader translator; the options attribute is used to specify the parameter configuration of the converter, e.g. using the @ babel/preset-env parameter to indicate code loading using the latest ECMAScript standard.
S240, judging whether the asynchronous loading code packet in the plurality of divided code packets belongs to a routing scene or not.
In the embodiment of the application, the partitioned code package comprises an asynchronous loading code package, and the code needing to be delayed to be loaded can be divided into a plurality of independent packages by utilizing the function of Webpack on an import dynamic loading component of ES6 so as to determine the asynchronous loading code package, and the asynchronous loading code package is loaded only when needed.
In the embodiment of the application, the routing scene is determined based on the page function corresponding to the asynchronous loading code packet, and if the page function can be loaded through front-end webpage navigation, the asynchronous loading code packet is indicated to belong to the routing scene.
In the embodiment of the application, whether the asynchronous loading code package in the plurality of divided code packages belongs to a routing scene or not is judged, so that when a route page needs to be accessed later, only the code corresponding to the route is loaded, the whole file code does not need to be loaded, the code amount of loading the first page of the page is greatly reduced, the loading speed of the first page is improved, and the user experience is optimized.
As one embodiment of the present application, the determining whether the asynchronously loaded code packet in the plurality of split code packets belongs to a routing scenario includes:
Identifying the page function of the asynchronous loading code packet, and judging whether the page function belongs to the routing scene or not based on a preset scene rule;
when the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
when the page function belongs to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets belongs to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset routing component to obtain a loading front-end page of the divided code packets;
and when the asynchronous loading code packet does not belong to a routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
and when the page function does not belong to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets does not belong to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset high-order component to obtain a loading front-end page of the divided code packets.
Each asynchronous loading code packet has a corresponding front-end page function, such as popup, page style, icon display, and the like.
In the embodiment of the application, the preset scene rule can be that the asynchronous loading code packet which can be loaded out through front-end webpage navigation belongs to a routing scene, and the asynchronous loading code packet which needs to be imported into a popup window for loading belongs to a non-routing scene.
In an embodiment of the present application, the preset routing component may be a Router component; the preset higher-order component may be a Hoc component.
S250, if the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet.
In the embodiment of the application, the routing component is used for loading as required, for example, when a user switches from one route to another route, only the code packet corresponding to the new route is needed to be loaded, and the whole application program code is not needed to be reloaded, so that unnecessary loading requests can be reduced, and the code loading efficiency is improved. The loading front-end page is the front-end user interface of the webpage.
As an embodiment of the present application, the performing delay loading on the split code packet by using a preset routing component to obtain a loading front-end page of the split code packet includes:
Dynamically importing the split code packet into a first delay loading component by utilizing a loading function in the routing component;
and carrying out asynchronous rendering on the first delay loading assembly, and loading the asynchronously rendered first delay loading assembly by utilizing a routing function in the routing assembly to obtain a loading front-end page of the split code packet.
The method comprises the steps of importing a reaction component into application program codes, importing a split code package into an import function through a reaction.lazy loading function to generate dynamic loading codes of the split code package, importing the dynamic loading codes into a first delay loading component (such as a suspend component), and rendering the first delay loading component through a standby UI through the reaction.lazy loading function.
In the embodiment of the application, the whole segmentation code package is wrapped by using the Router component, a waiting animation is set when the segmentation code package is loaded by using the suspend component in the React component, the corresponding Router component is loaded according to the target Route path by utilizing the Switch component in the React component to match the target Route, the Router component is further used for Route configuration, and the component attribute is used for designating that the segmentation code package is required to be loaded.
In the embodiment of the application, the split code package is dynamically imported into the first delay loading component by utilizing the loading function in the routing component, so that a specific split code package can be loaded only when needed, instead of loading all split code packages when an application program is started, page resources are fully utilized, and the code loading efficiency is improved.
And S260, if the asynchronous loading code packet does not belong to a routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet.
In the embodiment of the application, the high-order component is used for asynchronously loading the partitioned code packets which do not belong to the reason scene, so that the loading process of other partitioned code packets is prevented from being blocked in the loading process, and the code loading efficiency is improved. Wherein, the loading which does not belong to the routing scene comprises conditional code loading (such as loading of a bullet frame component) and loading outside the routing scene (such as loading of a sidebar or a footer).
As an embodiment of the present application, the performing delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet includes:
Identifying a code package state of the partitioned code package using a state function in the higher-order component;
when the code packet state is an asynchronous loading state, asynchronously loading the split code packet through the high-order component to obtain a loading front-end page of the split code packet;
when the code packet state is a delay loading state, encapsulating the split code packet into a second delay loading component;
rendering the second delay loading component, and loading the rendered segmentation code package by calling a higher-order function in the higher-order component to obtain a loading front-end page of the segmentation code package.
The state recognition function is a usesite hook function, a state variable Component can be defined through the usesite function, whether the split code packet is cached in the state variable is recognized, and if the split code packet is not cached in the state variable, the split code packet is indicated to be in a delayed loading state; if the split code packet is cached in the state variable, the split code packet is indicated to be in an asynchronous loading state.
In one embodiment of the application, the split code package is asynchronously loaded by using a SuppenseHoc loading function of the higher-order Component to call Component state variables, and when loading is completed, a loading front-end page corresponding to the split code package is displayed.
Further, in an embodiment of the present application, the second delayed loading component may be a react. Rendering the second delay loading component through a reaction function, determining a page function corresponding to the split code package, calling the reaction function of the SuspenseHoc of the higher-order component to specify a delay loading interface of the split code package, displaying a loading interface (loading) interface when the split code package is not loaded, and displaying a loading front-end page corresponding to the split code package when the split code package is loaded.
In the embodiment of the application, the code packet state of the split code packet is identified by utilizing the state function in the high-order component, so that the code packet state of the delayed loading and the code packet state of the asynchronous loading can be distinguished, and the code packet is reloaded when the asynchronous loading is needed, thereby reducing the resource occupation amount of a page, improving the response speed of the page, and carrying out delayed loading on the split code packet when the main thread of the code loading is not influenced, ensuring the response efficiency of the page and ensuring the experience of a user.
Compared with the prior art, the embodiment of the application has the following main beneficial effects:
in the embodiment of the application, the segmentation points of the application program code are identified based on the preset code segmentation rule and the code name attribute, the application program code is segmented according to the segmentation points by utilizing the code segmentation attribute to obtain a plurality of segmentation code packages, the application program code can be segmented into a plurality of independent code packages according to the needs, and the subsequent loading is carried out when the application program code is needed, so that the initial loading time and the memory usage amount of a page are reduced, the subsequent code loading efficiency and the page response efficiency are improved, and the asynchronous loading of the segmentation code packages can be realized by carrying out route loading and non-route delay loading on the asynchronous loading code packages, and the code packages of the route page are loaded only when the page is loaded by the route, so that the resource occupation amount of the page is reduced, and the code loading efficiency and the user experience are improved. Therefore, the code loading method of the application program provided by the embodiment of the application can improve the code loading efficiency and the user experience.
Those skilled in the art will appreciate that implementing all or part of the above-described methods in accordance with the embodiments may be accomplished by way of a computer program stored in a computer-readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a random access Memory (Random Access Memory, RAM).
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.
With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a code loading apparatus 310 for an application program, where the embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be specifically applied to various electronic devices.
The embodiment of the application provides a code loading system of an application program, which comprises the following components;
An obtaining module 311, configured to obtain an application code to be segmented, where the application code is configured with a plurality of code name attributes and code segmentation attributes;
an identifying module 312, configured to identify a division point of the application program code based on a preset code division rule and the code name attribute;
a splitting module 313, configured to split the application program code according to the splitting point by using the code splitting attribute to obtain a plurality of split code packages, where the split code packages include an asynchronous loading code package;
a judging module 314, configured to judge whether an asynchronous loading code packet in the plurality of split code packets belongs to a routing scenario; a kind of electronic device with high-pressure air-conditioning system
A loading module 315, configured to delay loading the split code packet by using a preset routing component if the asynchronous loading code packet belongs to a routing scenario, so as to obtain a loading front page of the split code packet; and if the asynchronous loading code packet does not belong to the routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet.
Compared with the prior art, the embodiment of the application has the following main beneficial effects:
In the embodiment of the application, the segmentation points of the application program code are identified based on the preset code segmentation rule and the code name attribute, the application program code is segmented according to the segmentation points by utilizing the code segmentation attribute to obtain a plurality of segmentation code packages, the application program code can be segmented into a plurality of independent code packages according to the needs, and the subsequent loading is carried out when the application program code is needed, so that the initial loading time and the memory usage amount of a page are reduced, the subsequent code loading efficiency and the page response efficiency are improved, and the asynchronous loading of the segmentation code packages can be realized by carrying out route loading and non-route delay loading on the asynchronous loading code packages, and the code packages of the route page are loaded only when the page is loaded by the route, so that the resource occupation amount of the page is reduced, and the code loading efficiency and the user experience are improved. Therefore, the code loading device of the application program provided by the embodiment of the application can improve the code loading efficiency and the user experience.
In order to solve the technical problems, the embodiment of the application also provides computer equipment. Referring specifically to fig. 4, fig. 4 is a basic structural block diagram of a computer device according to the present embodiment.
The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It should be noted that only computer device 4 having components 41-43 is shown in the figures, but it should be understood that not all of the illustrated components are required to be implemented and that more or fewer components may be implemented instead. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.
The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.
The memory 41 includes at least one type of readable storage medium including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the storage 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 4. Of course, the memory 41 may also comprise both an internal memory unit of the computer device 4 and an external memory device. In this embodiment, the memory 41 is typically used for storing an operating system installed on the computer device 4 and various types of application software, such as program codes of a code loading method of an application program. Further, the memory 41 may be used to temporarily store various types of data that have been output or are to be output.
The processor 42 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute the program code stored in the memory 41 or process data, such as the program code of a code loading method for executing the application program.
The network interface 43 may comprise a wireless network interface or a wired network interface, which network interface 43 is typically used for establishing a communication connection between the computer device 4 and other electronic devices.
The present application also provides another embodiment, namely, a computer-readable storage medium storing a code loading method program of the application program, where the code loading method program of the application program is executable by at least one processor, so that the at least one processor performs the steps of the code loading method of the application program as described above.
From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general purpose hardware online platform, and of course also by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present application.
The application is operational with numerous general purpose or special purpose computer system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
It is apparent that the above-described embodiments are only some embodiments of the present application, but not all embodiments, and the preferred embodiments of the present application are shown in the drawings, which do not limit the scope of the patent claims. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a thorough and complete understanding of the present disclosure. Although the application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing description, or equivalents may be substituted for elements thereof. All equivalent structures made by the content of the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the scope of the application.
Claims (10)
1. A method for loading code for an application program, the method comprising the steps of:
acquiring an application program code to be segmented, wherein the application program code is configured with a plurality of code name attributes and code segmentation attributes;
identifying the dividing points of the application program codes based on a preset code dividing rule and the code name attribute;
dividing the application program code by utilizing the code division attribute according to the division point to obtain a plurality of divided code packages, wherein the divided code packages comprise asynchronous loading code packages;
judging whether an asynchronous loading code packet in the plurality of divided code packets belongs to a routing scene or not;
if the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front-end page of the split code packet;
and if the asynchronous loading code packet does not belong to the routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet.
2. The code loading method of an application program according to claim 1, wherein the code division rule includes a code name rule, a request rule, and a cache rule, and the step of identifying division points of the application program code based on a preset code division rule and the code name attribute includes the steps of:
Identifying an asynchronous loading code critical value, a code reference number value, a maximum code file value and a minimum code file value which need to be segmented from the application program code based on the code name rule and the code name attribute as a first segmentation point;
identifying the maximum asynchronous loading request number, the maximum initial loading request number and the naming separator which need to be divided from the application program code based on the request rule as a second division point;
identifying a first cache group and a second cache group which need to be segmented from the application program code based on the cache rule as a third segmentation point;
and merging the first partition point, the second partition point and the third partition point to serve as partition points of the application program code.
3. The method for loading code of an application program according to claim 1, wherein before the step of identifying a first cache set and a second cache set to be partitioned from the application program code as a third partition point based on a cache rule among the code partition rules, the method further comprises the steps of:
traversing a plurality of code modules to be segmented in the application program code based on the caching rule;
Matching each code module to the corresponding first cache set or second cache set;
when the code module can be matched with the first cache group and the second cache group at the same time, identifying the priority of the cache group of the code module;
and when the priority of the cache group is the first priority, the code module is distributed to the first cache group, and when the priority of the cache group is the second priority, the code module is distributed to the second cache group.
4. The method for loading the code of the application program according to claim 1, wherein the performing delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet includes:
dynamically importing the split code packet into a first delay loading component by utilizing a loading function in the routing component;
and carrying out asynchronous rendering on the first delay loading assembly, and loading the asynchronously rendered first delay loading assembly by utilizing a routing function in the routing assembly to obtain a loading front-end page of the split code packet.
5. The method for loading the code of the application program according to claim 1, wherein the performing delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet includes:
Identifying a code package state of the partitioned code package using a state function in the higher-order component;
when the code packet state is an asynchronous loading state, asynchronously loading the split code packet through the high-order component to obtain a loading front-end page of the split code packet;
when the code packet state is a delay loading state, encapsulating the split code packet into a second delay loading component;
rendering the second delay loading component, and loading the rendered segmentation code package by calling a higher-order function in the higher-order component to obtain a loading front-end page of the segmentation code package.
6. The method for loading code of an application program according to claim 1, wherein said dividing the application program code by using the code division attribute according to the division point to obtain a plurality of divided code packages comprises:
according to the segmentation points, the application program codes are initially segmented by utilizing the code segmentation attributes, so that a plurality of initial segmentation code packages are obtained;
and converting the plurality of initial segmentation code packets by using a preset converter and a grammar plug-in to obtain the plurality of segmentation code packets meeting preset loading conditions.
7. The method for loading code of an application program according to claim 1, wherein said determining whether an asynchronously loaded code packet of the plurality of divided code packets belongs to a routing scenario comprises:
identifying the page function of the asynchronous loading code packet, and judging whether the page function belongs to the routing scene or not based on a preset scene rule;
when the asynchronous loading code packet belongs to a routing scene, carrying out delay loading on the split code packet by using a preset routing component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
when the page function belongs to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets belongs to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset routing component to obtain a loading front-end page of the divided code packets;
and when the asynchronous loading code packet does not belong to a routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front page of the split code packet, wherein the method specifically comprises the following steps of:
and when the page function does not belong to the routing scene, determining that an asynchronous loading code packet in the plurality of divided code packets does not belong to the routing scene, and carrying out delay loading on the divided code packets by utilizing a preset high-order component to obtain a loading front-end page of the divided code packets.
8. A code loading apparatus for an application program, comprising:
the system comprises an acquisition module, a code segmentation module and a code segmentation module, wherein the acquisition module is used for acquiring application program codes to be segmented, and the application program codes are configured with a plurality of code name attributes and code segmentation attributes;
the identification module is used for identifying the division points of the application program codes based on a preset code division rule and the code name attribute;
the segmentation module is used for segmenting the application program code by utilizing the code segmentation attribute according to the segmentation point to obtain a plurality of segmentation code packages, wherein the segmentation code packages comprise asynchronous loading code packages;
the judging module is used for judging whether the asynchronous loading code packet in the plurality of divided code packets belongs to a routing scene or not; a kind of electronic device with high-pressure air-conditioning system
The loading module is used for carrying out delay loading on the split code packet by utilizing a preset routing component if the asynchronous loading code packet belongs to a routing scene, so as to obtain a loading front-end page of the split code packet; and if the asynchronous loading code packet does not belong to the routing scene, carrying out delay loading on the split code packet by using a preset high-order component to obtain a loading front-end page of the split code packet.
9. A computer device comprising a memory in which a computer program is stored and a processor which, when executing the computer program, carries out the steps of the method for code loading of an application program according to any one of claims 1 to 7.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements the steps of the method for loading code of an application program according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311213031.0A CN117193880A (en) | 2023-09-19 | 2023-09-19 | Code loading method, device and equipment of application program and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311213031.0A CN117193880A (en) | 2023-09-19 | 2023-09-19 | Code loading method, device and equipment of application program and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117193880A true CN117193880A (en) | 2023-12-08 |
Family
ID=88988530
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311213031.0A Pending CN117193880A (en) | 2023-09-19 | 2023-09-19 | Code loading method, device and equipment of application program and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117193880A (en) |
-
2023
- 2023-09-19 CN CN202311213031.0A patent/CN117193880A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112861057B (en) | Page rendering method, device, equipment and storage medium based on applet | |
| CN108647032B (en) | Application loading method and device, computer device and computer readable storage medium | |
| CN112149032B (en) | Advertisement interception method and device | |
| CN113126990B (en) | Page development method, device, equipment and storage medium | |
| CN110688096B (en) | Method and device for constructing application program containing plug-in, medium and electronic equipment | |
| CN112416458A (en) | Preloading method and device based on ReactNative, computer equipment and storage medium | |
| CN112612982A (en) | Webpage preloading method and device and computer equipment | |
| CN117193880A (en) | Code loading method, device and equipment of application program and storage medium | |
| CN112115738A (en) | Image identification method and device applied to browser end | |
| CN112100553B (en) | Webpage configuration method and device, electronic equipment and storage medium | |
| CN113656044A (en) | Android installation package compression method and device, computer equipment and storage medium | |
| CN113626747A (en) | Method and device for generating breadcrumb navigation | |
| CN108089900B (en) | Character string processing method and device | |
| CN111796878A (en) | Resource splitting and loading method and device applied to single-page application | |
| CN112905931A (en) | Page information display method and device, electronic equipment and storage medium | |
| CN108509478B (en) | Splitting and calling method of rule engine file, electronic device and storage medium | |
| CN112650502A (en) | Batch processing task processing method and device, computer equipment and storage medium | |
| CN118113376A (en) | Application program starting method for controlling miner lamp and related equipment | |
| CN113642295B (en) | Page typesetting method, device and computer program product | |
| CN112506582B (en) | Method, device, equipment and medium for processing small program data packet | |
| CN112925573B (en) | Method, device, equipment and computer readable medium for loading web page | |
| CN116595590A (en) | Data desensitization method, device, computer equipment and storage medium | |
| CN116302036A (en) | Business parameter management method, device, equipment and storage medium based on micro-service | |
| CN117591190A (en) | Application data loading optimization method, device, equipment and storage medium thereof | |
| CN117499270A (en) | Flow processing method and device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |