Vue-based on-demand loading method and storage medium

Abstract

The invention discloses an on-demand loading method based on Vue and a storage medium. The invention relates to the technical field of Web application programs. By configuring CDN service, uploading and optimizing storage and access of static resources and combining a lazy loading mechanism of Vue Router, the initial loading speed of a page and the efficiency of subsequent routing switching are improved; a resource reference path in the Vue project is modified, and all static resources are loaded through the CDN URL. And analyzing the actual demand of each page or function module, determining the basic dependence and the selectable dependence, and loading the corresponding module. According to the method and the device, static resources can be distributed to users more quickly through configuration of CDN services and modification of resource reference paths, network transmission time is shortened, and particularly for global users, resource loading time is greatly shortened through geographic proximity of the CDN. Besides, the lazy loading strategy of the Vue Router ensures that the page component is loaded only when needed, the first screen content can be quickly displayed, and the first impression of the user is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of Web application programs, in particular to optimizing resource loading methods and dynamic dependency management, and in particular to an on-demand loading method and storage medium based on Vue. Background Art

[0002] The initial loading technology of a web application refers to the process of loading necessary resources and data when a user first visits or when the application is restarted. It is a technology that delays the loading of resources that are not immediately needed. In web development, the corresponding scripts, images, or components are loaded only when the user scrolls to a specific part of the page or is about to access a specific function. Vue Router's lazy loading is a typical application. It loads routing components on demand through asynchronous components, reducing the first screen loading time.

[0003] Server-side rendering can generate a complete HTML page on the server and then send it to the browser, making the first screen load faster, but increasing the server burden. Client-side rendering dynamically builds pages in the browser, which has a slower first screen but more flexible interactions. Use browser cache, Service Worker or CDN cache and other technologies to store common or static resources, reduce network requests, and speed up resource loading.

[0004] In the initial loading technology of traditional web applications, the method of loading all the resources required for the entire page or application (such as JavaScript, CSS, images, etc.) at one time is often used. This method has the following problems, resulting in slow system response and low resource utilization. Because users may only need to access a part of the application's functions, but must wait for the entire application package to be downloaded before they can start using it, which includes many resources that may not be used immediately or at all. In addition, a large number of JavaScript and CSS files will block the browser from rendering the page until all related resources are loaded, prolonging the white screen time. At the same time, loading a large number of resources at one time will take up more bandwidth, which is particularly bad for users with poor network conditions. In addition, it takes time for the browser to process and parse large JS files, which may cause slow UI response, especially on mobile devices.

[0005] To this end, the present invention proposes a Vue-based on-demand loading method and storage medium. Summary of the invention

[0006] In view of this, the present invention hopes to provide a Vue-based on-demand loading method and storage medium to solve or alleviate the technical problems existing in the prior art, that is, how to solve the performance bottleneck and resource waste problems encountered in the initial loading process, and at least provide a beneficial option for this; the technical solution of the present invention is implemented as follows:

[0007] A Vue-based on-demand loading method:

[0008] 1. Overview:

[0009] This method aims to solve the above technical problems. Through step-by-step implementation, the performance and user experience of Web applications are comprehensively improved. It focuses on using CDN services to accelerate the distribution of static resources, including not only resource uploading and configuration optimization (S100), but also involves integrating the Vue project with CDN to achieve efficient resource loading (S101).

[0010] We delved into Vue Router's lazy loading mechanism, used Webpack's code splitting capability to generate independent JS files for each routing component, and implemented a lazy loading strategy in the routing configuration, effectively improving the initial page loading speed and navigation response.

[0011] Detailed planning is carried out for on-demand loading, from precise analysis of dependencies to intelligent resource loading strategies based on access frequency and resource size, ensuring that application resources are loaded quickly and efficiently, greatly enhancing the loading performance and operating efficiency of the application as a whole.

[0012] (II) Technical solution:

[0013] To achieve the above purpose, this solution needs to execute the following steps S1 to S3.

[0014] 2.1 Step S1, configure CDN service:

[0015] By configuring CDN services, uploading and optimizing the storage and access of static resources, and combining the lazy loading mechanism of Vue Router, the initial page loading speed and the efficiency of subsequent route switching are improved. It includes the following steps S100-S101.

[0016] 2.1.1 Step S100, resource upload and configuration:

[0017] Upload static resources (such as JS, CSS or images) to CDN, and configure cache rules and access URLs. The implementation method is as follows:

[0018] S1000, static resource organization and upload: organize and compress static resources (JS, CSS or pictures, etc.) in the project;

[0019] S1001, upload resources to CDN: use the tools or APIs provided by the CDN platform to batch upload the organized static resources to the CDN storage space;

[0020] S1002, configure cache rules: set the cache expiration time (TTL) according to the resource update frequency. For example, a longer time limit can be set for static resources, while a shorter time limit or cache should be disabled for dynamic content;

[0021] S1003, version control: add a version number or hash value to the resource as part of the file name to avoid the problem of delayed update of new resources due to caching. Configure how the CDN goes back to the source to obtain the latest resources, such as the back-to-source strategy when the cache does not exist or expires;

[0022] S1004, configure access URL: assign a custom domain name to the CDN resource and point it to the CNAME address provided by the CDN in the DNS resolution; ensure that the CDN supports the HTTPS protocol and configure the SSL certificate to improve the security of data transmission;

[0023] S1005, Update application resource references: In the Vue project, replace the original static resource reference path to ensure that all resource requests point to the CDN URL instead of the local or server path.

[0024] 2.1.2 Step S101, integration:

[0025] Modify the resource reference path in the Vue project so that all static resources are loaded through the CDN URL. The implementation methods include:

[0026] S1010, confirm CDN resource URL: record the CDN access URL of each resource. If a custom domain name is used, use the domain name as the resource prefix;

[0027] S1011, Update the configuration of the Vue project: modify the publicPath property in the Vue project configuration file to point to the URL of the CDN; use environment variables or configured global variables to construct the resource URL; execute in the Vue project configuration file (vue.config.js or .env file):

[0028] / / vue.config.js

[0029] module.exports = {

[0030] publicPath:'https: / / your-cdn-url.example.com / assets / ′

[0031] };

[0032] S1012, in HTML templates, CSS style files, and template parts of Vue components, replace all direct references to static resources and use CDN URLs.

[0033] 2.2 Step S2, execute Vue Router lazy loading:

[0034] Based on the routing configuration of Vue Router, a separate JS file is generated for each routing component and lazy loading is performed, which includes the following steps S200 to S201.

[0035] 2.2.1 Step S200, code segmentation:

[0036] Use Webpack's code splitting. Make sure your Webpack configuration supports code splitting and generates separate JS files for each route component.

[0037] 2.2.2 Step S201, Vue Router configures lazy loading:

[0038] In the routing configuration of Vue Router, dynamic import syntax is used to implement lazy loading of components.

[0039] You can also use the Network panel of the browser developer tools to check the resource loading status when the route is switched to confirm that the lazy loading mechanism is effective. The operation process includes:

[0040] S2010, modify the routing configuration: In the corresponding routing configuration file, use dynamic import syntax instead of directly importing components. In this way, when the route is accessed, the corresponding component will be loaded; for example, perform the following operations on src / router / index.js:

[0041] import Vue from 'vue';

[0042] import Router from'vue-router';

[0043] Vue.use(Router);

[0044] const Home=()=>import( / *webpackChunkName:"home"* /

[0045] '.. / components / Home.vue');

[0046] const About=()=>import( / *webpackChunkName:"about"* /

[0047] '.. / components / About.vue');

[0048] export default new Router({

[0049] routes:[

[0050] {path:' / ′,component:Home},

[0051] {path:' / about',component:About}, ]

[0053] });

[0054] S2011, lazy loading effect: Navigate to different routes based on the Network panel, so that the JS file of the corresponding route component will only start loading when a specific route is accessed. This indicates that the lazy loading mechanism has taken effect.

[0055] 2.3 Step S3, loading on demand:

[0056] Analyze the actual requirements of each page or functional module, clarify its basic dependencies and optional dependencies, and load the corresponding modules. It includes the following steps S300-S301.

[0057] 2.3.1 Step S300, determine the dependency relationship:

[0058] For non-core or optional dependencies, use dynamic import syntax to load the corresponding modules when needed. The operation process includes:

[0059] S3000, Code Review: Traverse each page or functional module in the application to identify which functions or UI components are non-core or conditionally used.

[0060] S3001, Use dynamic import: For identified non-core dependencies, use dynamic import (import()) syntax to load these modules on demand at runtime. Allow complex chart components to be displayed only under certain conditions:

[0061] async function loadChartModule(){

[0062] const ChartModule=await import('. / ChartModule.vue');

[0063] / / Initialize or use ChartModule

[0064] }

[0065] / / Call this function when needed

[0066] if(shouldDisplayChart){

[0067] loadChartModule();

[0068] }

[0069] 2.3.2 Step S301, execute optimized resource loading strategy:

[0070] Arrange preloading and prereading strategies based on page access frequency and resource size. The operation process includes:

[0071] S3010, Page access frequency analysis: Use logs or front-end performance monitoring tools to collect page access data and identify high-frequency access pages and low-frequency access pages.

[0072] S3011, resource size assessment: Evaluate the resource size of each module and optimize the resources that are large but not often used immediately.

[0073] S3012, perform preloading and prereading:

[0074] Preloading: For frequently accessed pages or large basic libraries, after the user's current page is loaded, preload the page resources that may be accessed next.

[0075] By using in the HTML head <link rel＝"preload"> Tag implementation, or use in JavaScript <link> DOM API for dynamic addition of elements:

[0076] <link rel＝"preload"href＝" path to important-module.js"as＝"script">

[0077] Prefetch: For low-priority resources that may be accessed in the future, use the prefetch strategy. Used for page resources that users may but may not access. Used in JavaScript <link rel＝"prefetch"> To achieve:

[0078] <link rel＝"prefetch"href＝" path to potential-next-page.js"as＝"script">

[0079] (III) Mechanism for solving technical problems:

[0080] 3.1 CDN configuration and resource optimization (2.1 Steps S1&S100 / S101):

[0081] Through globally distributed CDN nodes, users can obtain static resources from the nearest server, reduce network latency, and speed up resource loading. This is especially significant for users in remote locations. CDN cache settings can ensure that frequently accessed resources are stored in edge nodes, and users can read them directly from the cache when they visit again, avoiding repeated requests to the source server, reducing server pressure, and improving response speed. Change the static resource link in the Vue project to CDN URL to ensure that CDN acceleration can be used when the page is loaded for the first time.

[0082] 3.2 Vue Router lazy loading (2.2 steps S2&S200 / S201):

[0083] Webpack's code splitting feature allows you to split your application into small chunks, with the component corresponding to each route being loaded asynchronously only when that route is accessed, greatly reducing the first screen loading time.

[0084] Use dynamic import syntax to implement lazy loading of components in the routing configuration, ensuring that users only load the code required for the current browsing page instead of loading all the resources of the entire application at once, thereby reducing the initial loading burden.

[0085] 3.3 On-demand loading and resource management strategy (2.3 steps S3 & S300 / S301):

[0086] Analyze the real needs of each page or function, load only the necessary basic dependencies, and use dynamic import for non-core or infrequently used modules to achieve "loading when needed" to further reduce the initial loading pressure.

[0087] Based on the page access frequency and resource size, the preloading and pre-reading of resources are intelligently arranged so that resources are prepared before the user may need them, improving the smoothness of subsequent interactions while ensuring efficient resource utilization.

[0088] Compared with the prior art, the present invention has the following beneficial effects:

[0089] 1. Significantly improve the first screen loading speed: Through the configuration of CDN services and the modification of resource reference paths, the present invention can distribute static resources to users faster, reducing network transmission time. Especially for global users, the geographical proximity of CDN greatly shortens resource loading time. In addition, Vue Router's lazy loading strategy ensures that page components are loaded only when needed, and the first screen content can be displayed quickly, improving the user's first impression.

[0090] 2. Optimize resource utilization and reduce bandwidth consumption: The on-demand loading and code segmentation technology of the present invention enables the application to load only the minimum set of resources required for the current view, avoiding unnecessary resource downloads, reducing the burden on server bandwidth and user device storage, and improving resource utilization efficiency. Users can experience smoother transitions when browsing different pages or triggering different functions, reducing the freeze caused by waiting for resources to load, and improving the overall interactive experience.

[0091] 3. Improve application performance and maintainability: The dynamic import and preloading / prereading strategies of the present invention not only optimize the application loading performance, but also make the code structure clearer, easier to maintain and expand. The modular code structure helps team collaboration and facilitates subsequent code management and function iteration.

[0092] 4. Improve system flexibility and responsiveness: The solution of the present invention enables applications to adapt more flexibly to different network conditions and user behaviors, especially in mobile devices and environments with poor network conditions. It can maximize the use of limited network resources through on-demand loading and intelligent resource strategies to ensure rapid response of applications. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0094] Figure 1 It is a schematic diagram of the method flow of the present invention;

[0095] Figure 2 is a schematic flow chart of step S1 of the present invention;

[0096] Figure 3 is a schematic flow chart of step S2 of the present invention;

[0097] Figure 4 It is a schematic diagram of the process of step S3 of the present invention. DETAILED DESCRIPTION

[0098] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below;

[0099] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0100] Example 1: Please refer to Figures 1 to 4 This embodiment discloses a Vue-based on-demand loading method, which includes the following steps S1 to S3.

[0101] In this embodiment, regarding step S1, configuring CDN service: by configuring CDN service, uploading and optimizing the storage and access of static resources, combined with the lazy loading mechanism of Vue Router, the initial page loading speed and the efficiency of subsequent route switching are improved. It includes the following steps S100-S101.

[0102] Specifically, step S100, resource upload and configuration: upload static resources (such as JS, CSS or pictures, etc.) to CDN, and configure cache rules and access URLs. The implementation method is as follows:

[0103] S1000 static resource organization and upload: By organizing and compressing static resources in the project, such as JS, CSS, pictures, etc., the file size is reduced and the transmission process is accelerated. Compression reduces bandwidth consumption and increases the speed at which users obtain resources.

[0104] S1001 Upload resources to CDN: Utilize the distributed storage feature of CDN to upload resources to multiple nodes around the world. When users access resources, they will be obtained from the nearest node, which greatly reduces network latency and improves resource loading speed.

[0105] S1002 Configure cache rules: By setting a reasonable cache expiration time (TTL), static resources can be stored in the user's local cache for a long time, without having to re-download them for subsequent visits, which significantly speeds up page loading. Set a shorter cache or disable dynamic content to ensure real-time information.

[0106] S1003 Version Control: By adding a version number or hash value to the resource file name, it ensures that the browser can obtain the latest resource every time the resource is updated, avoiding the problem of resource obsolescence caused by caching, while maintaining the performance advantages brought by caching.

[0107] S1004 configures access URL and security: SSL encryption ensures the security of data transmission and enhances user trust.

[0108] S1005 Update application resource references: In the Vue project, modify the resource reference path to point to the CDN URL to ensure that all resource requests are distributed through the CDN, further leveraging the advantages of CDN to reduce server load and speed up resource loading.

[0109] Specifically, step S101, integration: modify the resource reference path in the Vue project so that all static resources are loaded through the CDN URL. The implementation method includes:

[0110] S1010, confirm CDN resource URL: ensure that resource references in the Vue application are accurate, use custom domain names as resource prefixes, and unify resource access paths for easy management and monitoring.

[0111] S1011, Update the configuration of the Vue project: modify the publicPath property in the Vue project configuration file to point to the URL of the CDN; use environment variables or configured global variables to construct the resource URL; execute in the Vue project configuration file (vue.config.js or .env file):

[0112] / / vue.config.js

[0113] module.exports = {

[0114] publicPath:'https: / / your-cdn-url.example.com / assets / ′

[0115] };

[0116] S1012: In the HTML templates, CSS style files, and component templates of the Vue application, replace the original resource paths with CDN paths in batches manually or through automated tools to ensure that the application can efficiently load resources from the CDN during runtime.

[0117] It is understandable that in this step, through CDN distribution, resources are loaded from servers that are geographically closer to users, reducing network latency. At the same time, the caching mechanism significantly reduces the burden of repeated loading, which significantly improves the initial page loading speed and route switching efficiency. Through version control and on-demand loading, it is ensured that users only obtain the latest and necessary resources, avoiding resource waste and improving resource utilization efficiency. Faster loading speed reduces user waiting time, improves user experience, and enhances user satisfaction and retention rate. The adoption of the HTTPS protocol protects the security of user data during transmission and enhances user trust. Unified resource management and reference paths simplify resource update and maintenance processes and improve development efficiency.

[0118] In this embodiment, regarding step S2, Vue Router lazy loading is performed: based on the routing configuration of Vue Router, a separate JS file is generated for each routing component, and lazy loading is performed, which includes the following steps S200 to S201.

[0119] Specifically, step S200, code splitting: using the characteristics of Webpack, split the application code into multiple smaller "chunks" (code blocks). In the Vue project, the application that originally needs to be packaged into a single large JavaScript file is subdivided into small files that are loaded on demand. The specific operation involves enabling the relevant code splitting plug-in in the Webpack configuration file (such as webpack.config.js), or in the project generated by the Vue CLI.

[0120] For route components, you can instruct Webpack to perform code splitting by using dynamic imports (i.e. import() syntax) in the Vue Router configuration to generate independent chunks for each main route.

[0121] It is understandable that, because not all component codes are loaded at once, but only the code required for the current view is loaded, the user's initial waiting time is significantly shortened, improving the user experience. As the user navigates to different pages, the JS files of related components are loaded, avoiding unnecessary resource preloading and saving bandwidth and device resources.

[0122] Specifically, step S201, Vue Router configures lazy loading: In the routing configuration of Vue Router, use dynamic import syntax to implement lazy loading of components. You can also use the Network panel of the browser developer tool to check the resource loading status when the route is switched to confirm that the lazy loading mechanism is effective. Its operation process includes:

[0123] S2010, modify the routing configuration: In the Vue Router configuration file, use dynamic import syntax for each routing component. Webpack will automatically recognize these dynamic import statements and generate independent chunk files during the build. In this way, when the route is accessed, the corresponding component will be loaded; for example, perform the following operations on src / router / index.js:

[0124] import Vue from 'vue';

[0125] import Router from'vue-router';

[0126] Vue.use(Router);

[0127] const Home=()=>import( / *webpackChunkName:"home"* /

[0128] '.. / components / Home.vue');

[0129] const About=()=>import( / *webpackChunkName:"about"* /

[0130] '.. / components / About.vue');

[0131] export default new Router({

[0132] routes:[

[0133] {path:' / ′,component:Home},

[0134] {path:' / about',component:About}, ]

[0136] });

[0137] S2011, lazy loading effect: Through the browser's developer tools, especially the Network panel, observe whether only the relevant JS files are loaded when switching routes. This confirms the successful implementation of the lazy loading mechanism, that is, the component code corresponding to each route is only downloaded and executed when its route is accessed.

[0138] It is understandable that when users browse different pages, each page only contains the core code required by the current page, thus reducing the amount of data loaded at a time and improving the response speed of switching between pages. The lazy loading mechanism allows for more sophisticated resource management and allocation, which helps to better utilize bandwidth under limited network conditions, especially for mobile device users, which can significantly reduce traffic consumption and waiting time.

[0139] In this embodiment, step S3, on-demand loading: analyzing the actual requirements of each page or functional module, clarifying its basic dependencies and optional dependencies and loading the corresponding modules, includes the following steps S300-S301.

[0140] Specifically, step S300 determines the dependency relationship: for non-core or optional dependencies, dynamic import syntax is used to load the corresponding module when needed. The operation process includes:

[0141] S3000, Code Review: Traverse each page or functional module in the application to identify which functions or UI components are non-core or conditionally used.

[0142] S3001, Use dynamic import: For identified non-core dependencies, use dynamic import (import()) syntax to load these modules on demand at runtime. Allow complex chart components to be displayed only under certain conditions:

[0143] async function loadChartModule(){

[0144] const ChartModule=await import('. / ChartModule.vue');

[0145] / / Initialize or use ChartModule

[0146] }

[0147] / / Call this function when needed

[0148] if(shouldDisplayChart){

[0149] loadChartModule();

[0150] }

[0151] It is understandable that by loading only the code that is immediately needed for the current page or function, the waiting time when the user first visits is significantly reduced, and the responsiveness and user experience of the application are improved. Dynamic loading ensures that resources are allocated on demand and avoids the loading of useless code, thus saving valuable client resources (such as memory and CPU cycles).

[0152] Specifically, step S301 executes the optimized resource loading strategy: arranges the preloading and pre-reading strategies according to the page access frequency and resource size. The operation flow includes:

[0153] S3010, Page access frequency analysis: With the help of log analysis or front-end performance monitoring tools, collect and analyze user access patterns to distinguish which pages are frequently visited and which are less frequently visited.

[0154] S3011, resource size assessment: Classify each module in the application by size, identify resources that are large but not often used immediately, so as to take targeted optimization measures.

[0155] S3012, perform preloading and prereading:

[0156] Preloading: For frequently accessed pages or large basic libraries, after the user's current page is loaded, preload the page resources that may be accessed next.

[0157] By using in the HTML head <link rel＝"preload"> Tag implementation, or use in JavaScript <link> DOM API for dynamic addition of elements:

[0158] <link rel＝"preload"href＝" path to important-module.js"as＝"script">

[0159] This ensures that relevant resources are ready before users may jump to these pages.

[0160] Prefetch: For low-priority resources that may be accessed in the future, use the prefetch strategy. Used for page resources that users may but may not access. Used in JavaScript <link rel＝"prefetch"> To achieve:

[0161] <link rel＝"prefetch"href＝" path to potential-next-page.js"as＝"script">

[0162] This strategy will not block the loading of the current page, but it can obtain resources that may be needed in the future in advance to prepare for subsequent interactions.

[0163] Understandably, the preloading strategy ensures fast response of frequently visited pages, and the delay felt by users during navigation is greatly reduced. The pre-reading mechanism reasonably arranges the download order and timing of network resources. Even when the user does not directly request it, it can efficiently use idle time to pre-download the resources that may be needed, without interfering with the current experience and accelerating subsequent operations. The comprehensive use of preloading and pre-reading strategies realizes the refined management of resource loading according to the importance of resources and user behavior prediction, which not only ensures the immediate availability of key resources, but also minimizes the negative impact on user experience.

[0164] Embodiment 2: This embodiment further provides an implementation procedure for the technical solution of Embodiment 1:

[0165]

[0166] In the above program, Promise encapsulation: By creating a Promise object, this function converts the operation of loading external scripts into an asynchronous operation, making the control flow of script loading more flexible and manageable. <script>标签并设置其src属性指向要加载的脚本URL，这是Web开发中常用的动态加载脚本的方法。

[0167] 通过监听onload和onerror事件，当脚本成功加载或加载失败时，分别调用Promise的resolve和reject方法，从而控制异步操作的完成或异常处理。加载完脚本后从文档头移除<script>标签，避免不必要的DOM节点积累

[0168] 可以理解的是，通过接收组件和依赖项数组作为参数，使用Promise.all来并行加载Vue组件和其依赖的脚本文件。这样组件的加载不再阻塞于依赖脚本的加载，实现了按需加载。当所有依赖的脚本和组件本身都加载完毕后，该函数通过Promise返回组件，使得VueRouter能够异步解析并渲染组件。

[0169] 需要指出的是，在Vue的路由文件中，component字段不再直接导入组件，而是改用asyncVueComponent函数。这样做，每个路由在被访问时，其组件和相关依赖脚本才会被加载。每个路由配置中明确指出了组件的依赖脚本URL，如ECharts和dayjs库，确保了只有当用户访问特定路由时，这些外部依赖才会被加载，有效减少了初始加载时的资源请求。

[0170] 上述基于Vue的按需加载方案的程序中，通过按需加载组件和其依赖脚本，显著减少了应用首次加载时的资源体积，加快了页面的初始呈现速度，提升了用户体验。避免了非必需资源的提前加载，减少了服务器带宽消耗和用户设备资源占用，尤其是在移动端或网络条件不佳的场景下效果更为明显。

[0171] 以上所有实施例仅表达了本发明的相关实际应用的实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

[0172] 对于本领域技术人员而言，还可以进一步意识到结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

[0173] 同时本领域技术人员可以理解实现上述所有实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其他介质的任何引用，均可包括非易失性和 / 或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)，以及存储器总线动态RAM(RDRAM)等。< / script>

Claims

1. A Vue-based on-demand loading method, characterized in that: The steps include: S1, configure CDN service: upload and optimize the storage and access of static resources by configuring CDN service, and integrate VueRouter's lazy loading mechanism; S2, execute Vue Router lazy loading: based on Vue Router's routing configuration, generate a separate JS file for each routing component and perform lazy loading; S3, on-demand loading: Analyze the actual needs of each page or functional module, clarify its basic dependencies and optional dependencies, and load the corresponding modules.

2. The on-demand loading method according to claim 1, characterized in that: In S1, the method of uploading and optimizing is: Organize and compress static resources in the project; Upload the sorted static resources in batches to the CDN storage space; Set cache expiration time according to resource update frequency; Add version numbers or hash values ​​to resources as part of the file name; Assign a custom domain name to the CDN resource and point it to the CNAME address provided by the CDN in the DNS resolution.

3. The on-demand loading method according to claim 2, characterized in that: In the Vue project, replace the original static resource reference path so that all resource requests point to the CDN URL instead of the local or server path.

4. The on-demand loading method according to claim 1, characterized in that: In S1, the integration method is: modify the resource reference path in the Vue project so that all static resources are loaded through the CDN URL: Modify the publicPath property in the Vue project's configuration file to point to the CDN URL; Use environment variables or configured global variables to construct resource URLs; In the HTML template, CSS style file, and template part of the Vue component, replace all direct references to static resources and use CDN URLs.

5. The on-demand loading method according to claim 1, characterized in that: In S2, the method for routing configuration includes: S200, code splitting: Use Webpack's code splitting to generate separate JS files for each routing component; S201, Vue Router configuration lazy loading: In Vue Router's routing configuration, use dynamic import syntax to implement lazy loading of components.

6. The on-demand loading method according to claim 5, characterized in that: In S201, the implementation method of the dynamic import grammar is: In the corresponding routing configuration file, use dynamic import syntax instead of directly importing components; Navigate to different routes based on the Network panel so that the JS file of the corresponding route component will only start loading when a specific route is accessed.

7. The on-demand loading method according to claim 1, characterized in that: In S3, the analysis method is: traverse each page or functional module in the application, identify which functions or UI components are conditionally used, and apply dynamic import syntax to them.

8. The on-demand loading method according to claim 7, characterized in that: In the S3, it also includes executing the optimized resource loading strategy: Collect page access data and identify high-frequency and low-frequency pages; Based on the optimization of the resource size of each module.

9. A storage medium, characterized in that: The storage medium stores program instructions that can implement the on-demand loading method as described in any one of claims 1-8.

Images