Vue component loading method, device, equipment and storage medium

Abstract

The present invention relates to the field of computers, and discloses a Vue component loading method, device, equipment and storage medium. The method comprises: obtaining an application page access request; obtaining a corresponding page component according to a page address; if the page component includes a lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, the page component is loaded again; if the page component includes a preload tag, user behavior data is obtained, and based on the user behavior data, the page component to be accessed is predicted, and the predicted page component is loaded in advance; the page component is rendered, and a page is generated to a user terminal. In an embodiment of the present invention, the response speed of a Web application can be enhanced, resource consumption can be reduced, and the fluency of user interaction can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a Vue component loading method, device, equipment and storage medium. Background Art

[0002] Vue component is one of the core concepts in the Vue.js framework, which allows developers to split complex user interfaces into independent, reusable code blocks. Each Vue component is an independent module containing templates, logic, and styles, which can be developed and tested separately and then combined together to build a complete application. For example, a page may consist of multiple components, such as a navigation bar, a sidebar, a content area, etc.

[0003] There are some significant problems in the existing Vue component development, which are mainly reflected in the long first screen loading time, resource waste, unresponsiveness and high complexity of technical implementation. Summary of the invention

[0004] The main purpose of the present invention is to solve the technical problems of slow response speed and waste of resources in Web applications.

[0005] A first aspect of the present invention provides a Vue component loading method, the Vue component loading method comprising:

[0006] Obtaining an application page access request, wherein the application page access request carries an address of a page to be accessed;

[0007] According to the page address, a corresponding page component is obtained, wherein the page component includes a lazy loading tag or a preloading tag;

[0008] If the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, the page component is loaded again;

[0009] If the page component includes the preload tag, user behavior data is obtained, and based on the user behavior data, a page component to be accessed is predicted, and the predicted page component is loaded in advance;

[0010] Render the page components and generate a page for the user terminal.

[0011] Optionally, in a first implementation of the first aspect of the present invention, if the page component includes the preload tag, obtaining user behavior data, and predicting a page component to be accessed based on the user behavior data, and loading the predicted page component in advance includes:

[0012] Establishing a monitoring event, and obtaining user behavior data through the monitoring event;

[0013] According to the user behavior data, a user behavior sequence is obtained through a behavior model;

[0014] If the page component includes the preload tag, the page component to be accessed is predicted based on the user behavior sequence, and the predicted page component is loaded in advance.

[0015] Optionally, in a second implementation of the first aspect of the present invention, if the page component includes the preload tag, predicting the page component to be accessed according to the user behavior sequence, and loading the predicted page component in advance includes:

[0016] If the page component includes the preload tag, predicting the page component to be accessed based on the user behavior sequence;

[0017] Assign priorities to predicted page components;

[0018] A preset tag is inserted into the predicted page component to instruct the browser to load the predicted page component in advance according to the priority.

[0019] Optionally, in a third implementation of the first aspect of the present invention, if the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, before loading the page component, it also includes:

[0020] Real-time monitoring of network status and equipment performance;

[0021] According to the network condition and the device performance, the lazy loading tag or the preloading tag in the page component is adjusted.

[0022] Optionally, in a fourth implementation of the first aspect of the present invention, adjusting the lazy loading tag or the preloading tag in the page component according to the network condition and the device performance includes:

[0023] If the network condition is good and the device performance is high, modify the preload mark so that more of the page components are loaded in advance, the network condition is obtained by the network connection type and the network speed, and the device performance is obtained by the number of CPU cores, memory size, GPU performance, and battery status of the device;

[0024] If the network condition is poor and the device performance is low, modify the lazy loading tag or the preloading tag to delay or cancel the preloading of non-critical page components, or adopt lazy loading for the non-critical page components;

[0025] If the number of page visits within a preset time exceeds a preset threshold, the preloading of other non-urgent page components is suspended to ensure that the components in the page are loaded first.

[0026] Optionally, in a fifth implementation of the first aspect of the present invention, if the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, reloading the page component includes:

[0027] Use the webpack packaging tool to split the application code into multiple code blocks;

[0028] If the page component includes the lazy loading tag and the page component is not a non-first screen component, when routing to the page component, the code block corresponding to the page component is requested to load the page component.

[0029] Optionally, in a sixth implementation of the first aspect of the present invention, when routing to the page component, requesting the code block corresponding to the page component to load the page component includes:

[0030] The page component is configured as an asynchronous component, and the asynchronous component is used during routing configuration, so that only when the routing is accessed can the corresponding page component be routed to request the code block corresponding to the page component to load the page component.

[0031] The second aspect of the present invention provides a Vue component loading device, comprising: a memory and at least one processor, wherein instructions are stored in the memory, and the memory and the at least one processor are interconnected through a line; the at least one processor calls the instructions in the memory so that the Vue component loading device executes the above-mentioned Vue component loading method.

[0032] A third aspect of the present invention provides a computer-readable storage medium, in which instructions are stored. When the computer-readable storage medium is run on a computer, the computer executes the above-mentioned Vue component loading method.

[0033] In an embodiment of the present invention, an application page access request is obtained, and the application page access request carries the address of the page to be accessed; according to the page address, a corresponding page component is obtained, and the page component includes a lazy loading tag or a preloading tag; if the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, the page component is loaded again; if the page component includes the preloading tag, user behavior data is obtained, and according to the user behavior data, the page component to be accessed is predicted, and the predicted page component is loaded in advance; the page component is rendered, and a page is generated to the user terminal. In the present invention, the lazy loading tag and preloading tag of the Vue page component are used to implement lazy loading and preloading strategies, so that developers do not need to manually write complex loading logic, which greatly reduces the development burden, and through lazy loading and preloading, the initial page loading time is reduced, and content is loaded on demand, thereby enhancing the response speed of Web applications, reducing resource consumption, and improving the fluency of user interaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 A schematic diagram of an embodiment of a Vue component loading method in an embodiment of the present invention;

[0035] Figure 2 A schematic diagram of an embodiment of a Vue component loading device in an embodiment of the present invention;

[0036] Figure 3 It is a schematic diagram of an embodiment of a Vue component loading device in an embodiment of the present invention. DETAILED DESCRIPTION

[0037] Embodiments of the present invention provide a Vue component loading method, device, equipment and storage medium.

[0038] The embodiments disclosed in the present invention will be described in more detail below with reference to the accompanying drawings. Although certain embodiments disclosed in the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments disclosed in the present invention are only for exemplary purposes and are not intended to limit the scope of protection disclosed in the present invention.

[0039] In the description of the embodiments disclosed in the present invention, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0040] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 , an embodiment of the Vue component loading method in an embodiment of the present invention includes:

[0041] S100: Obtain an application page access request.

[0042] In this embodiment, the user enters a URL or clicks a link in the browser to initiate an application page access request. This request can be a GET or POST method, depending on the user operation and application requirements. Then, the browser resolves the domain name in the URL into an IP address. This step is completed by the DNS server. After obtaining the IP address, the browser establishes a connection with the server, wherein the browser and the server establish a connection through the TCP protocol. The browser then sends an application page access request to the server through the established connection. After receiving the application page access request, the server obtains the IP address, that is, the address of the page to be accessed.

[0043] S200, obtaining a corresponding page component according to the page address.

[0044] In this embodiment, after the server obtains the page address, it can load the corresponding page component, wherein lazy loading and preloading strategies are used to load these page components. Among them, lazy loading is a delayed loading technology, and its core idea is to load resources only when users really need them. For example, the user comment area component module of the product details page in the shopping website does not need to be displayed immediately on the details page. It is a conditional display component, and this component can be configured with lazy loading. Lazy loading can significantly reduce the resource pressure at the initial loading of the page, increase the rendering speed of the first screen, and thus improve the user experience. Preloading is a technology that loads resources that may be needed in the future in advance, which helps to predict the user's next operation and preload components with high probability of access, thereby reducing loading time. For example, when the user stays on the product list page, the product details page component is preloaded. Specifically, the components in the Vue application are reasonably divided, and a lazy loading or preloading mark is set for each component, wherein the setting of lazy loading or preloading is based on the single responsibility principle (each component should be responsible for only one function or display logic), reusability (a part of the UI is used in multiple places) and page layout (the location of the component in the application) to determine which components are suitable for lazy loading and which may need to be preloaded.

[0045] S300: If the page component includes a lazy loading tag and the page component is not a non-first screen component, the page component is loaded when routing to the page component.

[0046] In this embodiment, the asynchronous component feature of Vue is used to configure the route so that the non-first screen components are loaded on demand when the route is switched. After obtaining the page component, first determine whether the page component includes a lazy loading tag. If so, and the page component is not a non-first screen component, then when the route is to the page component, the page component is loaded again. For example, in a web page, when the user scrolls to a page component element that is about to enter the viewport, the resources of the element, such as pictures or videos, are loaded.

[0047] S400: If the page component includes a preload tag, user behavior data is obtained, and based on the user behavior data, the page component to be accessed is predicted, and the predicted page component is loaded in advance.

[0048] In this embodiment, various behavioral data of users on the website are collected through front-end tracking technology, such as page access sequence, click flow, scroll depth, dwell time, etc., wherein Google Analytics, Segment or a self-built data tracking system can be used to realize the collection of behavioral data. Then, the collected behavioral data is used to establish a behavioral model. Specifically, the behavioral data set is first divided into a training set and a test set, the model is trained using the training set, and the performance of the model is verified using the test set. Then, the generalization ability of the model is evaluated by methods such as cross-validation or Bootstrapping, and then the model parameters are adjusted according to the evaluation results to optimize the model performance. For example, the prediction accuracy of the model can be improved by methods such as feature selection and hyperparameter tuning, or the use of a combined behavioral model can be considered to combine the prediction results of multiple models to improve the stability of the prediction. If the page component includes a preload tag, the user's behavioral data is obtained, and the page component to be visited is predicted based on the user's behavioral data and through the behavioral model, and the predicted page component is loaded in advance. Then, the browser cache or ServiceWorker technology is used to store the loaded page component resources to reduce the need for repeated loading.

[0049] S500, rendering page components, generating a page for the user terminal.

[0050] In this embodiment, in frameworks such as Vue, the rendering of components is implemented through render functions or createElement functions, which create virtual DOM nodes according to the logic of the components and render them on the page. When a user visits a URL, the corresponding page components are loaded according to the configuration and rendered on the page. Optionally, in order to improve the page rendering performance, skeleton screen rendering, lazy loading and other technologies can be used to first display a general skeleton, and then gradually load and render the specific content. In order to facilitate developer monitoring and debugging, the loading status, loading time and resource usage of each page component are displayed through a visual interface to help developers quickly locate and optimize performance bottlenecks.

[0051] In an optional implementation of the first aspect of the present invention, if the page component includes a preload tag, user behavior data is obtained, and based on the user behavior data, a page component to be accessed is predicted, and loading the predicted page component in advance includes:

[0052] Establish a monitoring event and obtain user behavior data through the monitoring event; obtain the user behavior sequence based on the user behavior data through the behavior model; if the page component includes a preload tag, predict the page component to be visited based on the user behavior sequence, and load the predicted page component in advance.

[0053] In this embodiment, the above-mentioned behavior model adopts a sequence model. The sequence model is a neural network model that can process time series data and can capture the time dependency in the data. Common sequence models include RNN (recurrent neural network), LSTM (long short-term memory network) and Transformer, etc. The user's behavior sequence is analyzed by the sequence model. For example, by analyzing a large amount of user behavior data, the model can learn the common browsing path of "home page->product list->detailed product page". When building the model, it is necessary to perform feature engineering on the user's behavior sequence to extract meaningful features. For example, the Word2Vec model can be used to convert the user's behavior sequence into a word vector to characterize the user's dynamic interest preference. According to the user's current behavior sequence, the behavior model can predict in real time the page resources that the user may visit next. The time window effect is considered when predicting, that is, the user's recent behavior has a greater impact on the prediction result. Use JavaScript to monitor related events and collect user behavior data on the client.

[0054] In an optional implementation of the first aspect of the present invention, if the page component includes a preload tag, predicting the page component to be accessed based on the user behavior sequence, and loading the predicted page component in advance includes:

[0055] If the page component includes a preload tag, the page component to be accessed is predicted based on the user behavior sequence; a priority is assigned to the predicted page component; and a preset tag is inserted into the predicted page component to instruct the browser to load the predicted page component in advance according to the priority.

[0056] In this example, Vue itself does not directly support the configuration of preloading components, but it can be indirectly implemented using the prefetch or preload features of Webpack. If you want to preload some routing components that may be used when the browser is idle after the main page is loaded, you can add <link rel="prefetch"> Tag; For Vue projects, you can use Webpack's prefetch or preload attributes when dynamically importing.

[0057] Assign priorities to preloaded page components or resources. Critical page components or resources (such as first-screen content and highly interactive elements) have higher priority than non-critical resources. In addition, dynamically adjust the preloaded page components or resources based on network status information and device performance. For example, preload more page components or resources in a high-bandwidth environment, and reduce preloads in low-bandwidth or unstable connections to avoid affecting the loading speed of instant content; high-performance devices can withstand more instant computing and resource loading, while low-performance or low-power devices should adopt a more conservative loading strategy. Then, based on the preload dynamic adjustment strategy, dynamically insert or modify<link rel="prefetch"> Tags are used to instruct the browser to preload specific page components or resources. If the behavior model believes that the user is likely to visit a certain page and the network and device conditions permit, a preload request is issued to the page components or resources related to the page.

[0058] In an optional implementation of the first aspect of the present invention, if the page component includes a lazy loading tag and the page component is not a non-first screen component, when routing to the page component, before loading the page component, it also includes:

[0059] Monitor network conditions and device performance in real time; adjust lazy loading tags or preloading tags in page components based on network conditions and device performance.

[0060] In this embodiment, the network status and device performance changes are monitored in real time, wherein the navigator.connection API is used to obtain the user's network type (such as 2G, 3G, 4G, 5G, Wi-Fi) and estimated network speed. Device performance is measured by the device's hardware information, which includes the number of CPU cores, memory size, GPU performance, battery status, etc., and can be obtained through JavaScript's navigator object and some third-party libraries such as device.js. Develop a central decision engine that receives data collected from various dimensions and uses predefined rules or model algorithms to calculate the most appropriate loading strategy. For example, when the behavior model indicates that the user is about to browse a certain part of the page, the engine will decide whether to load this part of the resources in advance based on the current network status and device performance. Based on the output of the decision engine, the lazy loading and preloading tags are dynamically adjusted. For example, in good network conditions, preloading is used for the predicted next page component; when the network conditions are poor or the device resources are tight, the preloading of non-critical resources is delayed or canceled.

[0061] In an optional implementation of the first aspect of the present invention, adjusting the lazy loading mark or preloading mark in the page component according to the network condition and the device performance includes:

[0062] If the network condition is good and the device performance is high, the preloading tag is modified to load more page components in advance. The network condition is obtained through the network connection type and network speed, and the device performance is obtained through the number of CPU cores, memory size, GPU performance, and battery status of the device; if the network condition is poor and the device performance is low, the lazy loading tag or preloading tag is modified to delay or cancel the preloading of non-critical page components, or lazy loading is used for non-critical page components; if the number of page visits within the preset time exceeds the preset threshold, the preloading of other non-urgent page components is suspended to ensure that the components in the page are loaded first.

[0063] In this embodiment, if the user's network condition is good and the device performance is high, such as the user is using a 5G network and the device is the latest flagship mobile phone with a high-performance CPU and sufficient RAM, the preloading tag is modified to load more page components or resources in advance. For example, for a news reading application, after detecting that the network condition is good and the device performance is high, a more aggressive preloading strategy is adopted to preload the full text content, high-definition pictures and video previews of several articles under the list of articles that the user may be interested in, so as to make full use of high-speed networks and powerful hardware and reduce user waiting time.

[0064] If the network condition is poor and the device performance is low, such as when the user is using a crowded public Wi-Fi environment and the device is a low-end mobile phone with limited performance, slow down the preloading and modify the preloading tag to delay or cancel the preloading of non-critical page components or resources. For example, in a news reading application, only the article list and article summary are preloaded, not the full text content, and the preloading of high-definition pictures and videos is delayed or canceled. Alternatively, modify the lazy loading tag to use lazy loading for non-critical page components or resources to ensure that the first screen content is presented quickly, and then gradually load the subsequent content as the user scrolls the page. In addition, you can dynamically request the server to provide compressed picture and video resources to reduce the download size and speed up the loading speed.

[0065] If the number of page visits within the preset time exceeds the preset threshold, it means that the user is performing high-frequency operations, that is, frequently switching to the page. Immediately suspend the preloading activities of other non-urgent page components, prioritize the loading efficiency of the current page, and avoid slowing down the current experience due to preloading too much unvisited content. At the same time, use the cache strategy to ensure that the user can load quickly when returning to the page they have browsed.

[0066] In an optional implementation of the first aspect of the present invention, if the page component includes a lazy loading tag and the page component is not a non-first screen component, when routing to the page component, reloading the page component includes:

[0067] The application code is split by the webpack packaging tool to obtain multiple code blocks; if the page component includes a lazy loading tag and the page component is not a non-first screen component, when routing to the page component, the code block corresponding to the page component is requested to load the page component.

[0068] In this embodiment, the application code is split into multiple smaller code chunks (chunks) through the functions provided by packaging tools such as webpack, so that when the application is loaded, the browser only needs to download the code chunks required for the current page or function, rather than loading all the code of the entire application at once. When the user navigates to a new route, Vue Router will asynchronously load the corresponding page component, because this page component has been split into independent chunks by code, and the browser will only request this new chunk instead of reloading the entire application, which speeds up the switching between pages.

[0069] In an optional implementation of the first aspect of the present invention, when routing to a page component, requesting a code block corresponding to the page component to load the page component includes:

[0070] Configure the page component as an asynchronous component and use the asynchronous component when configuring the route, so that only when the route is accessed can it be routed to the corresponding page component and request the code block corresponding to the page component to load the page component.

[0071] In this embodiment, in Vue, the asynchronous component feature can be used to implement lazy loading. In the routing configuration, the component that needs to be lazy loaded is configured as an asynchronous component. Vue Router allows the use of component attributes in the form of functions when defining routes, which is the key to implementing lazy loading. In the routing configuration file, a function that returns a Promise can be specified for the component attribute. This function uses dynamic import import() to asynchronously load components. By utilizing the asynchronous component feature, the corresponding page component can be routed only when the route is accessed.

[0072] See also Figure 2 A second aspect of the present invention provides a Vue component loading device, the Vue component loading device comprising:

[0073] The request acquisition module 10 is used to acquire an application page access request, wherein the application page access request carries the address of the page to be accessed;

[0074] The component acquisition module 20 is used to obtain the corresponding page component according to the page address, and the page component includes a lazy loading tag or a preloading tag;

[0075] A lazy loading module 30, for loading the page component when routing to the page component if the page component includes a lazy loading tag and the page component is not a non-first screen component;

[0076] A preloading module 40 is used to obtain user behavior data if the page component includes a preloading tag, and predict the page component to be accessed based on the user behavior data, and load the predicted page component in advance;

[0077] The component rendering module 50 is used to render page components and generate pages for the user terminal.

[0078] In an optional implementation of the second aspect of the present invention, the preloading module 40 is also used to establish a monitoring event, and obtain user behavior data through the monitoring event; based on the user behavior data, a user behavior sequence is obtained through a behavior model; if the page component includes a preloading tag, the page component to be accessed is predicted based on the user behavior sequence, and the predicted page component is loaded in advance.

[0079] In an optional implementation of the second aspect of the present invention, the preloading module 40 is also used to predict the page component to be accessed based on the user behavior sequence if the page component includes a preloading tag; assign priorities to the predicted page components; and insert preset tags into the predicted page components to instruct the browser to load the predicted page components in advance according to the priority.

[0080] In an optional implementation of the second aspect of the present invention, the Vue component loading device further includes:

[0081] The loading adjustment module is used to monitor the network status and device performance in real time; according to the network status and device performance, the lazy loading tag or preloading tag in the page component is adjusted.

[0082] In an optional implementation of the second aspect of the present invention, the loading adjustment module is also used to modify the preloading mark if the network condition is good and the device performance is high, so that more page components are loaded in advance. The network condition is obtained by the network connection type and the network speed, and the device performance is obtained by the number of CPU cores, memory size, GPU performance, and battery status of the device; if the network condition is poor and the device performance is low, the lazy loading mark or the preloading mark is modified to delay or cancel the preloading of non-critical page components, or lazy loading is used for non-critical page components; if the number of page visits within a preset time exceeds a preset threshold, the preloading of other non-urgent page components is suspended to ensure that the components in the page are loaded first.

[0083] In an optional implementation of the second aspect of the present invention, the lazy loading module 30 is also used to split the application code through the webpack packaging tool to obtain multiple code blocks; if the page component includes a lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, the code block corresponding to the page component is requested to load the page component.

[0084] In an optional implementation of the second aspect of the present invention, the lazy loading module 30 is also used to configure the page component as an asynchronous component, and use the asynchronous component during the routing configuration, so that only when the route is accessed can it be routed to the corresponding page component and request the code block corresponding to the page component to load the page component.

[0085] Figure 3 It is a structural diagram of a Vue component loading device provided by an embodiment of the present invention. The Vue component loading device 500 may have relatively large differences due to different configurations or performances, and may include one or more processors (central processing units, CPU) 510 (for example, one or more processors) and a memory 520, and one or more storage media 530 (for example, one or more massive storage devices) storing application programs 533 or data 532. Among them, the memory 520 and the storage medium 530 can be short-term storage or persistent storage. The program stored in the storage medium 530 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the Vue component loading device 500. Furthermore, the processor 510 can be configured to communicate with the storage medium 530 to execute a series of instruction operations in the storage medium 530 on the Vue component loading device 500.

[0086] The Vue component loading device 500 may also include one or more power supplies 540, one or more wired or wireless network interfaces 550, one or more input and output interfaces 560, and / or one or more operating systems 531, such as Windows Server, Mac OS X, Unix, Linux, Free BSD, etc. Those skilled in the art will appreciate that Figure 3 The illustrated Vue component loading device structure does not constitute a limitation on the Vue component loading device, and may include more or fewer components than illustrated, or a combination of certain components, or a different arrangement of components.

[0087] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are executed on a computer, the computer executes the steps of the Vue component loading method.

[0088] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0089] In addition, although each operation is described in a specific order, this should be understood as requiring such operation to be performed in the specific order shown or in a sequential order, or requiring that all illustrated operations should be performed to obtain desired results. Under certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although some specific implementation details are included in the above discussion, these should not be interpreted as limiting the scope of the present disclosure. Some features described in the context of a separate embodiment can also be implemented in a single implementation in combination. On the contrary, the various features described in the context of a single implementation can also be implemented in multiple implementations individually or in any suitable sub-combination mode.

[0090] Although the subject matter has been described in language specific to structural features and / or methodological logical actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. On the contrary, the specific features and actions described above are merely example forms of implementing the claims.

Claims

1. A Vue component loading method, characterized in that: The Vue component loading method includes: Obtaining an application page access request, wherein the application page access request carries an address of a page to be accessed; According to the page address, a corresponding page component is obtained, wherein the page component includes a lazy loading tag or a preloading tag; If the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, the page component is loaded again; If the page component includes the preload tag, user behavior data is obtained, and based on the user behavior data, a page component to be accessed is predicted, and the predicted page component is loaded in advance; Rendering the page components to generate a page for the user terminal; If the page component includes the preload tag, obtaining user behavior data, and predicting the page component to be accessed based on the user behavior data, and loading the predicted page component in advance includes: Establishing a monitoring event, and obtaining user behavior data through the monitoring event; According to the user behavior data, a user behavior sequence is obtained through a behavior model; If the page component includes the preload tag, predicting the page component to be accessed based on the user behavior sequence, and loading the predicted page component in advance; The behavior model adopts a sequence model, which is a neural network model that can process time series data and capture the time dependency in the data. The user behavior sequence is analyzed by the sequence model. When constructing the behavior model, feature engineering is performed on the user behavior sequence to extract meaningful features. The user behavior sequence is converted into a word vector using the Word2Vec model to characterize the user's dynamic interest preference. Based on the user's current behavior sequence, the behavior model predicts in real time the page resources that the user may visit next. The time window effect is considered during the prediction, that is, the user's recent behavior has a greater impact on the prediction result. If the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, before loading the page component, it also includes: Real-time monitoring of network status and equipment performance; Adjusting the lazy loading tag or preloading tag in the page component according to the network condition and the device performance; The adjusting the lazy loading mark or preloading mark in the page component according to the network condition and the device performance includes: If the network condition is good and the device performance is high, modify the preload mark so that more of the page components are loaded in advance, the network condition is obtained by the network connection type and the network speed, and the device performance is obtained by the number of CPU cores, memory size, GPU performance, and battery status of the device; If the network condition is poor and the device performance is low, modify the lazy loading tag or the preloading tag to delay or cancel the preloading of non-critical page components, or adopt lazy loading for the non-critical page components; If the number of page visits within a preset time exceeds a preset threshold, the preloading of other non-urgent page components is suspended to ensure that the components in the page are loaded first.

2. The Vue component loading method according to claim 1, characterized in that: If the page component includes the preload tag, predicting the page component to be accessed according to the user behavior sequence, and loading the predicted page component in advance includes: If the page component includes the preload tag, predicting the page component to be accessed based on the user behavior sequence; Assign priorities to predicted page components; A preset tag is inserted into the predicted page component to instruct the browser to load the predicted page component in advance according to the priority.

3. The Vue component loading method according to claim 1, characterized in that: If the page component includes the lazy loading tag and the page component is not a non-first screen component, then when routing to the page component, reloading the page component includes: Use the webpack packaging tool to split the application code into multiple code blocks; If the page component includes the lazy loading tag and the page component is not a non-first screen component, when routing to the page component, the code block corresponding to the page component is requested to load the page component.

4. The Vue component loading method according to claim 3, characterized in that: When routing to the page component, requesting the code block corresponding to the page component to load the page component includes: The page component is configured as an asynchronous component, and the asynchronous component is used during routing configuration, so that only when the routing is accessed can the corresponding page component be routed to request the code block corresponding to the page component to load the page component.

5. A Vue component loading device, characterized in that: The Vue component loading device comprises: A request acquisition module, used to acquire an application page access request, wherein the application page access request carries the address of the page to be accessed; A component acquisition module, used to obtain a corresponding page component according to the page address, wherein the page component includes a lazy loading tag or a preloading tag; A lazy loading module, for loading the page component when routing to the page component if the page component includes the lazy loading tag and the page component is not a non-first screen component; A preloading module, for obtaining user behavior data if the page component includes the preloading tag, and predicting the page component to be accessed based on the user behavior data, and loading the predicted page component in advance; A component rendering module, used to render the page components and generate a page for the user terminal; The preloading module is also used to establish a monitoring event and obtain user behavior data through the monitoring event; According to the user behavior data, a user behavior sequence is obtained through a behavior model; If the page component includes the preload tag, predicting the page component to be accessed based on the user behavior sequence, and loading the predicted page component in advance; The behavior model adopts a sequence model, which is a neural network model that can process time series data and capture the time dependency in the data. The user behavior sequence is analyzed by the sequence model. When constructing the behavior model, feature engineering is performed on the user behavior sequence to extract meaningful features. The user behavior sequence is converted into a word vector using the Word2Vec model to characterize the user's dynamic interest preference. Based on the user's current behavior sequence, the behavior model predicts in real time the page resources that the user may visit next. The time window effect is considered during the prediction, that is, the user's recent behavior has a greater impact on the prediction result. The Vue component loading device also includes a loading adjustment module for real-time monitoring of network status and device performance; Adjusting the lazy loading tag or preloading tag in the page component according to the network condition and the device performance; The loading adjustment module is further used to modify the preloading mark so that more of the page components are loaded in advance if the network condition is good and the device performance is high, the network condition is obtained by the network connection type and the network speed, and the device performance is obtained by the number of CPU cores, memory size, GPU performance, and battery status of the device; If the network condition is poor and the device performance is low, modify the lazy loading tag or the preloading tag to delay or cancel the preloading of non-critical page components, or adopt lazy loading for the non-critical page components; If the number of page visits within a preset time exceeds a preset threshold, the preloading of other non-urgent page components is suspended to ensure that the components in the page are loaded first.

6. A Vue component loading device, characterized in that: The Vue component loading device comprises: a memory and at least one processor, the memory stores instructions, and the memory and the at least one processor are interconnected via a line; The at least one processor calls the instruction in the memory so that the Vue component loading device executes the Vue component loading method according to any one of claims 1 to 4.

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

Images