Processing method and device for increasing Vue frame page loading speed

Abstract

The invention discloses a processing method and device for improving the page loading speed of a Vue frame. The processing method comprises the following steps: dynamically loading a JavaScript module to a specified page according to specified requirements; creating a CSS (Cascading Style Sheet) file, and dynamically creating lt through a JavaScript module at a position where the CSS file needs to be loaded; a linkgt; labeling the CSS file path, and setting the CSS file path as the path attribute of the external resource file; carrying out picture lazy loading on the specified page, and when the specified page is loaded for the first time, replacing the actual picture with the display position map; when a user scrolls a page or approaches a picture position, monitoring a scrolling event of the user, and dynamically loading picture resources through a JavaScript module; using lt for the specified page; a linkgt; and the label carries out component lazy loading, and in the component lazy loading process, when the specified component needs to be specified and loaded, the code of the corresponding component is loaded. According to the method, the problems of low page loading speed, low rendering efficiency and poor compatibility, expandability and safety in the prior art are solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of page development, and in particular relates to a processing method and device for improving the loading speed of a Vue framework page. Background Art

[0002] The Vue framework is a popular JavaScript framework that provides features such as responsive data binding and virtual DOM, making it easier for developers to build highly interactive web applications.

[0003] Currently, the Vue framework faces performance bottlenecks, such as slow page loading speed and low rendering efficiency, which affect the user experience. It requires complex configuration and a high learning curve, making it difficult to use and maintain. Due to the rapid version updates of the Vue framework, some technologies may have compatibility issues and cannot adapt to different versions of the Vue framework. It lacks good scalability, making it difficult to meet the needs of different projects or business changes. Development efficiency is low, and it is unable to quickly iterate and respond to changing requirements. It has security risks and is vulnerable to attacks such as XSS and CSRF, requiring strengthened security measures. Some technologies may have unclear structures, bloated code, difficult maintenance, and difficult to modularize and refactor. Therefore, it is necessary to develop a processing technology solution to improve the page loading speed of the Vue framework. Summary of the Invention

[0004] To this end, the present invention provides a processing method and device for improving the loading speed of Vue framework pages, which solves the problems of slow page loading speed, low rendering efficiency, poor compatibility, scalability and security existing in traditional technologies.

[0005] In order to achieve the above object, the present invention provides the following technical solution: a processing method for improving the loading speed of Vue framework pages, comprising:

[0006] Dynamically load JavaScript modules to a specified page based on specified requirements using the code splitting functionality of a modular packaging tool, including the import function and the Webpack tool.

[0007] Create a CSS file, the CSS file includes style content loaded on demand, and dynamically create it through the JavaScript module at the location where the CSS file needs to be loaded <link> Tag, and set the CSS file path to the path attribute of the external resource file;

[0008] Use the Intersection Observer API or a third-party library to lazy load images on a specified page. When the specified page is first loaded, a site map is displayed instead of the actual image. When the user scrolls the page or approaches the image location, the user's scroll event is monitored and the image resource is dynamically loaded through the JavaScript module.

[0009] Use the specified page <link> The tag is used to lazy load components. During the lazy loading process, when a specific component needs to be loaded, the code of the corresponding component is loaded.

[0010] As a preferred solution to improve the loading speed of Vue framework pages, the code splitting function of the modular packaging tool is used to dynamically load JavaScript modules to the specified page according to the specified requirements:

[0011] Create a new JavaScript file and write the module object that needs to be dynamically loaded;

[0012] If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool and use the dynamic import function of the dynamic import syntax of the import function to load the module objects.

[0013] As a preferred solution for the processing method of improving the loading speed of the Vue framework page, it also includes configuring the code splitting strategy of the CSS file in the configuration location of the Webpack tool;

[0014] At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or require function statement, and the Webpack tool loads and packages the CSS file on demand.

[0015] As a preferred solution for the processing method to improve the loading speed of the Vue framework page, it also includes: building a data caching mechanism, which includes a memory caching strategy and a browser local storage strategy;

[0016] The memory cache strategy uses Vuex or Vue's responsive data for data management;

[0017] The browser local storage strategy uses localStorage or IndexedDB to store data locally.

[0018] As a preferred solution for the processing method to improve the loading speed of the Vue framework page, it also includes: building a data preloading strategy, which loads the data required by the user in advance according to the user behavior and needs.

[0019] As a preferred solution for the processing method of improving the loading speed of the Vue framework page, it also includes: building a data reuse mechanism, which reuses the already obtained data in the specified page.

[0020] As a preferred solution for improving the loading speed of Vue framework pages, it also includes: building a data sharing mechanism to store the data obtained in one request in a specified location for sharing by multiple components or pages.

[0021] As a preferred solution for improving the loading speed of Vue framework pages, the method further includes: building a responsive strategy that dynamically adjusts the page presentation method according to device performance and network environment;

[0022] In the process of dynamically adjusting the page presentation mode, the responsive strategy uses CSS media queries and elastic layout to create a responsive design; the responsive strategy dynamically loads adaptive image resources according to device performance and screen resolution.

[0023] As a preferred solution for improving the loading speed of Vue framework pages, it also includes: merging multiple DOM operations into one DOM operation; when rendering the list, adding a unique key attribute to each element in the list.

[0024] The present invention also provides a processing device for improving the loading speed of a Vue framework page, comprising:

[0025] JavaScript on-demand loading module, which is used to dynamically load JavaScript modules to a specified page according to specified requirements through the code splitting function of the modular packaging tool, which includes the import function and the Webpack tool;

[0026] The CSS file on-demand loading module is used to create a CSS file. The CSS file includes style content loaded on demand. At the location where the CSS file needs to be loaded, it is dynamically created through the JavaScript module. <link> Tag, and set the CSS file path to the path attribute of the external resource file;

[0027] The image lazy loading module is used to lazy load images on a specified page using the Intersection Observer API or a third-party library. When a specified page is first loaded, a site map is displayed instead of the actual image. When the user scrolls the page or approaches the image position, the module monitors the user's scroll event and dynamically loads the image resource through the JavaScript module.

[0028] Component lazy loading module, used to use the specified page<link> The tag is used to lazy load components. During the lazy loading process, when a specific component needs to be loaded, the code of the corresponding component is loaded.

[0029] As a preferred solution for the processing device to improve the loading speed of Vue framework pages, in the JavaScript on-demand loading module:

[0030] Create a new JavaScript file and write the module object that needs to be dynamically loaded;

[0031] If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool and use the dynamic import function of the dynamic import syntax of the import function to load the module objects.

[0032] As a preferred solution for the processing device to improve the loading speed of Vue framework pages, the CSS file is loaded on demand in the module:

[0033] Configure the code splitting strategy for the CSS file in the Webpack tool configuration location;

[0034] At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or require function statement, and the Webpack tool loads and packages the CSS file on demand.

[0035] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0036] A data cache processing module is used to build a data cache mechanism, which includes a memory cache strategy and a browser local storage strategy;

[0037] The memory cache strategy uses Vuex or Vue's responsive data for data management;

[0038] The browser local storage strategy uses localStorage or IndexedDB to store data locally.

[0039] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0040] The data preloading module is used to build a data preloading strategy, which loads the data required by the user in advance according to the user's behavior and needs.

[0041] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0042] The data reuse module is used to construct a data reuse mechanism, which reuses the acquired data in a specified page.

[0043] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0044] The data sharing module is used to build a data sharing mechanism to store the data obtained in one request in a specified location for sharing by multiple components or pages.

[0045] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0046] A responsive processing module, which is used to build a responsive strategy that dynamically adjusts the page presentation method based on device performance and network environment;

[0047] In the process of dynamically adjusting the page presentation mode, the responsive strategy uses CSS media queries and elastic layout to create a responsive design; the responsive strategy dynamically loads adaptive image resources according to device performance and screen resolution.

[0048] As a preferred solution for the processing device to improve the loading speed of the Vue framework page, it also includes:

[0049] The DOM optimization module is used to merge multiple DOM operations into one DOM operation; when rendering a list, a unique key attribute is added to each element in the list.

[0050] The beneficial effects of the present invention are as follows: through the code splitting function of the modular packaging tool, JavaScript modules are dynamically loaded to the specified page according to the specified requirements, and the modular packaging tool includes the import function and the Webpack tool; a CSS file is created, and the CSS file includes the style content loaded on demand, and the JavaScript module is dynamically created at the location where the CSS file needs to be loaded. <link> Tag, and set the CSS file path to the path attribute of the external resource file; use Intersection ObserverAPI or a third-party library to lazy load images on the specified page, and when the specified page is first loaded, replace the actual image with a site map; when the user scrolls the page or approaches the image position, monitor the user's scroll event and dynamically load the image resource through the JavaScript module; use the <link>The tag performs lazy loading of components. During the lazy loading process, when a specified component needs to be loaded, the code of the corresponding component is loaded. The present invention can improve development efficiency, reduce the amount of coding, and accelerate the development progress of the project; it can realize a highly interactive and dynamic user interface, improve user experience and user satisfaction; it can reduce the overhead of page updates, improve page performance and response speed; it can help developers standardize code structure, improve code quality and maintainability; it can easily expand and customize functional modules, and realize the scalability and flexibility of the system; it can realize responsive design, mobile terminal adaptation and mobile App development, and improve mobile terminal user experience; it can help team members get started quickly, reduce communication costs, and improve team cooperation efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] To more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are merely exemplary, and those skilled in the art can, without inventive effort, derive other implementation drawings based on the provided drawings.

[0052] The structures, proportions, sizes, etc. illustrated in this specification are intended solely to complement the contents disclosed herein and to facilitate understanding and reading by persons skilled in the art. They are not intended to limit the conditions under which the present invention may be implemented and therefore have no substantive technical significance. Any structural modifications, changes in proportions, or adjustments in sizes, without affecting the efficacy and objectives of the present invention, shall remain within the scope of the technical contents disclosed herein.

[0053] Figure 1 A schematic flow chart of a method for improving the loading speed of a Vue framework page provided by an embodiment of the present invention;

[0054] Figure 2 A schematic diagram of the processing device architecture for improving the loading speed of Vue framework pages provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0055] The following describes the implementation of the present invention using specific embodiments. Those skilled in the art will readily understand the other advantages and benefits of the present invention from the disclosure herein. Obviously, the embodiments described are only a portion of the present invention, not all of it. All other embodiments derived by persons of ordinary skill in the art based on the embodiments of the present invention without inventive effort are intended to fall within the scope of protection of the present invention.

[0056] Example 1

[0057] See also Figure 1Embodiment 1 of the present invention provides a method for improving the loading speed of a Vue framework page, comprising the following steps:

[0058] S1. Dynamically load JavaScript modules to a specified page according to specified requirements using the code splitting function of a modular packaging tool, wherein the modular packaging tool includes an import function and a Webpack tool;

[0059] S2. Create a CSS file, which includes style content loaded on demand. At the location where the CSS file needs to be loaded, dynamically create a CSS file through the JavaScript module. <link> Tag, and set the CSS file path to the path attribute of the external resource file;

[0060] S3. Use the Intersection Observer API or a third-party library to lazy load images on the specified page. When the specified page is first loaded, a site map is displayed instead of the actual image. When the user scrolls the page or approaches the image location, the user's scroll event is monitored and the image resource is dynamically loaded through the JavaScript module.

[0061] S4. Use the above method on the specified page <link> The tag is used to lazy load components. During the lazy loading process, when a specific component needs to be loaded, the code of the corresponding component is loaded.

[0062] In this embodiment, in step S1, the code segmentation function of the modular packaging tool is used to dynamically load the JavaScript module to the specified page according to the specified requirements:

[0063] Create a new JavaScript file and write the module object that needs to be dynamically loaded;

[0064] If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool and use the dynamic import function of the dynamic import syntax of the import function to load the module objects.

[0065] Specifically, when loading a JavaScript module on demand, create a new JavaScript file, such as module.js, and write the module object that needs to be dynamically loaded. The core code is as follows:

[0066] "export const dynamicFunction=()=>{console.log('Dynamic function iscalled!');}".

[0067] Among them, if module.js contains n, you can use the dynamic import syntax as follows where you need to load the module:

[0068] "constbutton=document.querySelector('#myButton');

[0069] button.addEventListener('click',async()=>{

[0070] const{dynamicFunction}=awaitimport('. / dynamicModule.js');

[0071] dynamicFunction();

[0072] })”.

[0073] Among them, configure the code splitting function in the configuration file of the Webpack tool and set optimization.splitChunks to all. The code is as follows:

[0074] "module.exports={...optimization:{splitChunks:{chunks:'all',},},}".

[0075] Wherever you need to load a module object, use the dynamic import function of the dynamic import syntax. The code is as follows:

[0076] "constbutton=document.querySelector('#myButton');

[0077] button.addEventListener('click',async()=>{

[0078] const{dynamicFunction}=awaitimport('. / dynamicModule.js');

[0079] dynamicFunction();

[0080] })”.

[0081] In this embodiment, step S2 further includes configuring a code splitting strategy for the CSS file in a configuration location of the Webpack tool;

[0082] At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or require function statement, and the Webpack tool loads and packages the CSS file on demand.

[0083] Specifically, create a separate CSS file, such as style.css, which contains the style content that needs to be loaded on demand. Where the CSS file needs to be loaded, dynamically create it through JavaScript <link> Tag, and set the CSS file path to the href attribute. The implementation code is as follows:

[0084] "const link=document.createElement('link');

[0085] link.rel='stylesheet';

[0086] link.type='text / css';

[0087] link.href=style.css';

[0088] document.head.appendChild(link)".

[0089] <link> The tags are described as follows:

[0090] rel: required, indicating the relationship between the current document and the external resource;

[0091] type: describes the MIME type of the external resource, such as text / css, image / x-icon;

[0092] href: Indicates the path of the external resource file, that is, tells the browser the location of the external resource.

[0093] Among them, set the code splitting strategy of CSS files in the Webpack tool configuration file to ensure that CSS files are loaded on demand. The implementation code is as follows:

[0094]

[0095]

[0096] Among them, where the CSS file needs to be loaded, the CSS file is introduced through the import or require statement. Webpack will load and package the CSS file on demand. The implementation code is as follows:

[0097] "import '. / style.css';

[0098] or

[0099] require('. / style.css')".

[0100] In this embodiment, in step S3, when the page is first loaded, a site map (such as a small placeholder or other style) is displayed instead of the actual image. When the user scrolls the page or approaches the image position, the user's scroll event is monitored and the image resource is dynamically loaded through JavaScript. The core implementation code is as follows:

[0101]

[0102] Using the Intersection Observer API

[0103]

[0104]

[0105] Among them, you can use the Link tag to preload key resources; implement a lazy loading strategy, delay the loading of non-essential resources, and improve page response speed. Among them, the code for using the Link tag to preload key resources is as follows:

[0106]

[0107] In a possible embodiment, the further step includes: constructing a data caching mechanism, wherein the data caching mechanism includes a memory caching strategy and a browser local storage strategy;

[0108] The memory cache strategy uses Vuex or Vue's responsive data for data management;

[0109] The browser local storage strategy uses localStorage or IndexedDB to store data locally.

[0110] Specifically, use Vuex or Vue's responsive data for data management, caching requested data in memory to reduce duplicate requests. Use localStorage or IndexedDB for local data storage, allowing data to be loaded directly from the local server when the page is refreshed or revisited, eliminating the need for new requests. This optimizes data request and processing, reduces page lag, and allows for real-time performance monitoring to monitor page loading status and performance bottlenecks, allowing for timely adjustment of optimization strategies.

[0111] In this embodiment, in step S4, component lazy loading is implemented to load components on demand, and the component code is loaded only when needed. The core implementation code is as follows:

[0112]

[0113]

[0114] In a possible embodiment, the method further includes: constructing a data preloading strategy, wherein the data preloading strategy loads the data required by the user in advance according to the user behavior and demand.

[0115] Specifically, by understanding the data required by the page and preloading the data that may be needed based on user behavior and needs, the page blank waiting time can be reduced. Some frequently used data can be cached locally or in memory for fast access, reducing the number of requests to the server.

[0116] In a possible embodiment, it also includes: building a data reuse mechanism, which reuses the already obtained data in the specified page; building a data sharing mechanism, which stores the data obtained by one request in a specified location for sharing by multiple components or pages.

[0117] Specifically, data reuse refers to reusing already acquired data within a page, avoiding repeated requests for the same data and improving page loading efficiency and performance. The data sharing mechanism stores data acquired in a single request in an appropriate location (such as locally, in Vuex, or in the current object) for shared use by multiple components or pages. For components that require frequent updates, data can be cached and prioritized when updates are needed, reducing the number of times data needs to be retrieved repeatedly.

[0118] In a possible embodiment, the method further includes: constructing a responsive strategy, wherein the responsive strategy dynamically adjusts the page presentation mode according to device performance and network environment;

[0119] During the dynamic adjustment of page presentation, the responsive strategy uses CSS media queries and flexible layout to create a responsive design. This strategy dynamically loads adaptive image resources based on device performance and screen resolution. This strategy uses CSS media queries and flexible layout to create a responsive design that adapts to different device screen sizes and resolutions. Based on device performance and screen resolution, more adaptive images and resources are dynamically loaded to reduce load times and improve page performance.

[0120] In a possible embodiment, the method further includes: merging multiple DOM operations into one DOM operation; and adding a unique key attribute to each element in the list when rendering the list.

[0121] Specifically, to minimize frequent DOM operations, we merge multiple DOM operations into a single one, optimize the virtual DOM diff algorithm, reduce unnecessary DOM updates, and improve page rendering performance. When rendering lists, we add a unique key attribute to each element in the list. This allows the virtual DOM to quickly locate node changes when comparing old and new nodes, improving update efficiency.

[0122] In a possible embodiment, in a slower 3G / 4G mobile network environment, the following strategies may be considered:

[0123] Optimize images: reduce image quality, use lazy loading of images, or use image placeholders.

[0124] Lazy Loading of Resources: Lazy loading of third-party plugins or unnecessary resources.

[0125] Use caching and CDN: Reduce page loading time by using caching and CDN acceleration services.

[0126] Reduce redirects and requests: Reduce the number of redirects and requests as much as possible to reduce page loading time.

[0127] In a possible embodiment, in a high-speed 5G network or Wi-Fi network environment, the following strategies may be considered:

[0128] Load resources in advance: Load resources required by the page in advance through technologies such as preloading or prerendering.

[0129] Improve image quality: In a high-speed network environment, the image quality can be improved and the visual effect can be enhanced.

[0130] Provide more interactions and animations: Add more interactions and animation effects if network conditions permit.

[0131] In a possible embodiment, the presentation mode is adjusted according to the device performance. For low-end devices, the following optimization strategies can be considered:

[0132] Simplify page structure: avoid complex layouts and functions, and keep the page concise.

[0133] Use lightweight frameworks: Choose to use lightweight frameworks or libraries to reduce page loading and interaction costs.

[0134] Reduce complex animations: Avoid overly complex animation effects to reduce device performance requirements.

[0135] The development process using the method of the embodiment of the present invention is as follows:

[0136] (1) Requirements analysis: First, clarify the project requirements and goals, understand user needs, and determine the project scope and functional requirements.

[0137] (2) Technology selection: Select appropriate development tools and technical frameworks based on project requirements and the team's actual situation, and confirm the use of the Vue framework as the front-end development technology.

[0138] (3) Project Planning: Develop a detailed project plan and schedule, define development milestones and requirement priorities, and determine the development process and team collaboration methods.

[0139] (4) UI design: Conduct page interaction design and visual design, create UI prototypes and design specifications to ensure compliance with user experience and brand standards.

[0140] (5) Technical architecture design: Design a suitable front-end architecture, including component division, data flow management, routing design, etc., to ensure a clear structure and high maintainability.

[0141] (6) Coding implementation: Based on the design draft and requirement documents, develop front-end pages and components according to the specifications and best practices of the Vue framework to ensure code quality and semantics.

[0142] (7) Data management: Choose appropriate state management tools such as Vuex to manage and transmit data status to ensure the consistency and controllability of data flow.

[0143] (8) Performance optimization: Optimize the performance bottlenecks of websites or applications, including code compression, lazy loading, CDN acceleration, etc., to improve page loading speed and rendering efficiency.

[0144] (9) Testing: Conduct unit testing, integration testing, and end-to-end testing to ensure the compatibility and stability of the page on different browsers and devices.

[0145] (10) Deployment and release: Use appropriate deployment tools and processes to deploy the front-end code to the server, conduct pre-launch testing and monitoring, and ensure the normal operation of the website or application.

[0146] (11) Continuous optimization: Regularly monitor the performance of the website or application and collect user feedback, continuously optimize and improve it to enhance user experience and satisfaction.

[0147] In summary, the present invention uses the code splitting function of the modular packaging tool to dynamically load JavaScript modules to the specified page according to specified requirements. The modular packaging tool includes the import function and the Webpack tool; creates a CSS file, which includes style content loaded on demand, and dynamically creates a JavaScript module at the location where the CSS file needs to be loaded. <link>Tag, and set the CSS file path to the path attribute of the external resource file; use Intersection ObserverAPI or a third-party library to lazy load images on the specified page, and when the specified page is first loaded, replace the actual image with a site map; when the user scrolls the page or approaches the image position, monitor the user's scroll event and dynamically load the image resource through the JavaScript module; use the <link> The tag performs lazy loading of components. During the lazy loading process, when a specified component needs to be loaded, the code of the corresponding component is loaded. The present invention can improve development efficiency, reduce the amount of coding, and accelerate the development progress of the project; it can realize a highly interactive and dynamic user interface, improve user experience and user satisfaction; it can reduce the overhead of page updates, improve page performance and response speed; it can help developers standardize code structure, improve code quality and maintainability; it can easily expand and customize functional modules, and realize the scalability and flexibility of the system; it can realize responsive design, mobile terminal adaptation and mobile App development, and improve mobile terminal user experience; it can help team members get started quickly, reduce communication costs, and improve team cooperation efficiency.

[0148] It should be noted that the method of the embodiments of the present disclosure can be performed by a single device, such as a computer or server. The method of the embodiments of the present disclosure can also be applied in a distributed scenario, where multiple devices cooperate to perform the method. In such a distributed scenario, one of the multiple devices may only perform one or more steps of the method of the embodiments of the present disclosure, and the multiple devices will interact with each other to complete the method.

[0149] It should be noted that the above description is limited to some embodiments of the present disclosure. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in an order different from that described in the above embodiments and still achieve the desired results. Furthermore, the processes depicted in the accompanying drawings do not necessarily require the specific order or sequential order shown to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0150] Example 2

[0151] See also Figure 2 Embodiment 2 of the present invention provides a processing device for improving the loading speed of a Vue framework page, comprising:

[0152] A JavaScript on-demand loading module 100 is used to dynamically load JavaScript modules to a specified page according to specified requirements through the code splitting function of a modular packaging tool, wherein the modular packaging tool includes an import function and a Webpack tool;

[0153] CSS file on-demand loading module 200 is used to create a CSS file, the CSS file includes the style content loaded on demand, and is dynamically created by the JavaScript module at the location where the CSS file needs to be loaded. <link> Tag, and set the CSS file path to the path attribute of the external resource file;

[0154] The image lazy loading module 300 is used to lazy load images on a specified page using the Intersection Observer API or a third-party library. When a specified page is first loaded, a site map is displayed instead of the actual image. When a user scrolls the page or approaches an image, the module monitors the user's scroll event and dynamically loads the image resource through the JavaScript module.

[0155] Component lazy loading module 400, used to use the specified page <link> The tag is used to lazy load components. During the lazy loading process, when a specific component needs to be loaded, the code of the corresponding component is loaded.

[0156] In this embodiment, in the JavaScript on-demand loading module 100:

[0157] Create a new JavaScript file and write the module object that needs to be dynamically loaded;

[0158] If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool and use the dynamic import function of the dynamic import syntax of the import function to load the module objects.

[0159] In this embodiment, the CSS file is loaded on demand in module 200:

[0160] Configure the code splitting strategy for the CSS file in the Webpack tool configuration location;

[0161] At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or require function statement, and the Webpack tool loads and packages the CSS file on demand.

[0162] In this embodiment, it also includes:

[0163] The data cache processing module 500 is used to build a data cache mechanism, which includes a memory cache strategy and a browser local storage strategy;

[0164] The memory cache strategy uses Vuex or Vue's responsive data for data management;

[0165] The browser local storage strategy uses localStorage or IndexedDB to store data locally.

[0166] In this embodiment, it also includes:

[0167] The data preloading module 600 is used to construct a data preloading strategy, which preloads the data required by the user according to the user's behavior and needs.

[0168] In this embodiment, it also includes:

[0169] The data reuse module 700 is used to construct a data reuse mechanism, which reuses the acquired data in a specified page.

[0170] In this embodiment, it also includes:

[0171] The data sharing module 800 is used to build a data sharing mechanism to store the data obtained in one request in a designated location for sharing by multiple components or pages.

[0172] In this embodiment, it also includes:

[0173] Responsive processing module 900, used to build a responsive strategy that dynamically adjusts page presentation based on device performance and network environment;

[0174] In the process of dynamically adjusting the page presentation mode, the responsive strategy uses CSS media queries and elastic layout to create a responsive design; the responsive strategy dynamically loads adaptive image resources according to device performance and screen resolution.

[0175] In this embodiment, it also includes:

[0176] The DOM optimization module 010 is used to merge multiple DOM operations into one DOM operation; when rendering a list, a unique key attribute is added to each element in the list.

[0177] It should be noted that the information interaction, execution process, etc. between the modules of the above-mentioned device are based on the same concept as the method embodiment in Example 1 of the present application, and the technical effects they bring are the same as those of the method embodiment of the present application. For specific contents, please refer to the description in the method embodiment shown above in the present application, and will not be repeated here.

[0178] Example 3

[0179] Embodiment 3 of the present invention provides a non-transitory computer-readable storage medium, which stores a program code for a processing method for improving the loading speed of a Vue framework page. The program code includes instructions for executing the processing method for improving the loading speed of a Vue framework page of embodiment 1 or any possible implementation thereof.

[0180] Computer-readable storage media can be any available medium that can be accessed by a computer or a data storage device such as a server or data center that includes one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).

[0181] Example 4

[0182] Embodiment 4 of the present invention provides an electronic device, including: a memory and a processor;

[0183] The processor and the memory communicate with each other through a bus; the memory stores program instructions that can be executed by the processor, and the processor calls the program instructions to execute the processing method for improving the loading speed of the Vue framework page of Example 1 or any possible implementation thereof.

[0184] Specifically, the processor can be implemented by hardware or by software. When implemented by hardware, the processor can be a logic circuit, an integrated circuit, etc.; when implemented by software, the processor can be a general-purpose processor, which is implemented by reading software code stored in a memory. The memory can be integrated into the processor or located outside the processor and exist independently.

[0185] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present invention is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website, computer, server or data center to another website, computer, server or data center via a wired (e.g., coaxial cable, optical fiber, digital consumer customer line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode.

[0186] Obviously, those skilled in the art will appreciate that the various modules or steps of the present invention described above can be implemented using a general-purpose computing device, centralized on a single computing device, or distributed across a network of multiple computing devices. Alternatively, they can be implemented using program code executable by a computing device, which can then be stored in a storage device and executed by the computing device. In some cases, the steps shown or described can be performed in a different order than that shown, or can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.

[0187] Although the present invention has been described in detail above using general descriptions and specific embodiments, it will be apparent to those skilled in the art that modifications and improvements may be made thereto. Therefore, such modifications and improvements, without departing from the spirit of the present invention, are intended to be within the scope of protection claimed herein.

Claims

1. A method for improving the loading speed of a Vue framework page, characterized in that: include: Dynamically load JavaScript modules to a specified page according to specified requirements through the code splitting function of a modular packaging tool, wherein the modular packaging tool includes an import function and a Webpack tool; Create a CSS file, the CSS file includes style content loaded on demand, and dynamically create it through the JavaScript module at the location where the CSS file needs to be loaded <link> Tag, and set the CSS file path to the path attribute of the external resource file; Use Intersection ObserverAPI or a third-party library to lazy load images for the specified page. When the specified page is loaded for the first time, the site map is displayed instead of the actual image. When the user scrolls the page or approaches the image position, the user's scrolling event is monitored, and the image resource is dynamically loaded through the JavaScript module; Use the specified page <link> The tag is used to lazily load components. During the lazy loading process, when a specified component needs to be loaded, the code of the corresponding component is loaded.

2. According to a method for improving the loading speed of a Vue framework page according to claim 1, it is characterized in that: Through the code splitting function of the modular packaging tool, the JavaScript module is dynamically loaded to the specified page according to the specified requirements: Create a new JavaScript file and write the module object that needs to be loaded dynamically; If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool, and use the dynamic import function of the dynamic import syntax of the import function to load the module object.

3. According to a method for improving the loading speed of a Vue framework page according to claim 1, it is characterized in that: Also included is configuring a code splitting strategy for the CSS file in a configuration location of a Webpack tool; At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or the require function statement, and the Webpack tool loads and packages the CSS file on demand.

4. A method for improving the loading speed of a Vue framework page according to claim 1, characterized in that: Also includes: Building a data caching mechanism, the data caching mechanism including a memory caching strategy and a browser local storage strategy; The memory cache strategy uses Vuex or Vue's responsive data for data management; The browser local storage strategy uses localStorage or IndexedDB to store data locally; It also includes: constructing a data preloading strategy, wherein the data preloading strategy loads the data required by the user in advance according to the user's behavior and needs; It also includes: constructing a data reuse mechanism, wherein the data reuse mechanism reuses the acquired data in the specified page; It also includes: building a data sharing mechanism to store the data obtained in one request in a specified location for sharing by multiple components or pages.

5. A method for improving the loading speed of a Vue framework page according to claim 1, characterized in that: Also includes: Build a responsive strategy that dynamically adjusts page presentation based on device performance and network environment; In the process of dynamically adjusting the page presentation mode, the responsive strategy uses CSS media queries and elastic layout to create a responsive design; the responsive strategy dynamically loads adaptive image resources according to device performance and screen resolution.

6. A method for improving the loading speed of a Vue framework page according to claim 1, characterized in that: Also includes: Merge multiple DOM operations into one DOM operation; When rendering a list, add a unique key attribute to each element in the list.

7. A processing device for improving the loading speed of a Vue framework page, characterized in that: include: JavaScript on-demand loading module, which is used to dynamically load JavaScript modules to a specified page according to specified requirements through the code splitting function of a modular packaging tool, wherein the modular packaging tool includes an import function and a Webpack tool; The CSS file on-demand loading module is used to create a CSS file. The CSS file includes style content loaded on demand. At the location where the CSS file needs to be loaded, it is dynamically created through the JavaScript module. <link> Tag, and set the CSS file path to the path attribute of the external resource file; The image lazy loading module is used to lazy load images for the specified page using the Intersection Observer API or a third-party library. When the specified page is loaded for the first time, the actual image is replaced by the site map; When the user scrolls the page or approaches the image position, the user's scrolling event is monitored, and the image resource is dynamically loaded through the JavaScript module; Component lazy loading module, used to use the specified page <link> The tag is used to lazily load components. During the lazy loading process, when a specified component needs to be loaded, the code of the corresponding component is loaded.

8. A processing device for improving the loading speed of a Vue framework page according to claim 7, characterized in that: In the JavaScript on-demand loading module: Create a new JavaScript file and write the module object that needs to be loaded dynamically; If the newly created JavaScript file contains n locations where module objects need to be loaded, configure the code splitting function in the configuration file of the Webpack tool, and use the dynamic import function of the dynamic import syntax of the import function to load the module objects; The CSS file is loaded on demand in the module: Configure the code splitting strategy of the CSS file in the configuration location of the Webpack tool; At the location where the CSS file needs to be loaded, the CSS file is introduced through the import function or the require function statement, and the Webpack tool loads and packages the CSS file on demand.

9. A processing device for improving the loading speed of a Vue framework page according to claim 7, characterized in that: Also includes: A data cache processing module is used to construct a data cache mechanism, wherein the data cache mechanism includes a memory cache strategy and a browser local storage strategy; The memory cache strategy uses Vuex or Vue's responsive data for data management; The browser local storage strategy uses localStorage or IndexedDB to store data locally; A data preloading module is used to construct a data preloading strategy, which preloads the data required by the user according to the user's behavior and needs; A data reuse module, used to construct a data reuse mechanism, wherein the data reuse mechanism reuses the acquired data in a specified page; The data sharing module is used to build a data sharing mechanism to store the data obtained in a single request in a specified location for sharing by multiple components or pages.

10. A processing device for improving the loading speed of a Vue framework page according to claim 7, characterized in that: Also includes: A responsive processing module, used to build a responsive strategy that dynamically adjusts the page presentation mode according to device performance and network environment; In the process of dynamically adjusting the page presentation mode, the responsive strategy uses CSS media queries and elastic layout to create a responsive design; the responsive strategy dynamically loads adaptive image resources according to device performance and screen resolution; DOM optimization module, used to merge multiple DOM operations into one DOM operation; When rendering a list, add a unique key attribute to each element in the list.

Images