Webpage rendering method, device, and storage medium based on Nuxt components

Abstract

The present invention relates to the field of page rendering, and discloses a web page rendering method, device and storage medium based on Nuxt components. The method includes: configuring splitChunks data in a preset Nuxt component to obtain a web page segmentation setting Nuxt component; configuring a webpack compression plugin in the web page segmentation setting Nuxt component to obtain a web page compression setting Nuxt component; configuring HTTP cache parameters in a preset web browser and configuring routing parameters in the web page compression setting Nuxt component to obtain a routing Nuxt component, and loading the routing Nuxt component into the web browser; when the web browser receives a web page rendering address, conditional rendering processing is performed on the web page rendering address based on the routing Nuxt component to obtain a rendered web page. In the embodiments of the present invention, the volume of static files is reduced, a generation method for customized pages is provided, and the page generation and loading speed and flexibility are improved.

Description

Technical Field

[0001] The present invention relates to the field of page rendering, and particularly to a web page rendering method, device, and storage medium based on Nuxt components. Background Art

[0002] Static website generation technology plays an important role in modern web development. It can pre-render dynamic content into static files, thereby improving website performance and search engine optimization (SEO). Nuxt.js is a universal application framework component based on Vue.js that can easily achieve server-side rendering (SSR) and static site generation (SSG).

[0003] Currently, when developers use Nuxt.js for static site generation, they face some technical challenges and inconveniences. By default, the static site files generated by Nuxt.js contain a large amount of redundant code and unnecessary resources, resulting in overly large file sizes. Moreover, for some complex application scenarios, the static site generation solution of Nuxt.js may not be flexible enough to meet specific requirements. Therefore, in view of the problem of large data and low flexibility when rendering web pages with current Nuxt components, a technology is needed to solve the current problem. Summary of the Invention

[0004] The main purpose of the present invention is to solve the technical problem of large data and low flexibility when rendering web pages with current Nuxt components.

[0005] The first aspect of the present invention provides a web page rendering method based on Nuxt components, including the steps of:

[0006] Configuring splitChunks data in a preset Nuxt component to obtain a Nuxt component with web page segmentation settings;

[0007] Configuring a webpack compression plugin in the Nuxt component with web page segmentation settings to obtain a Nuxt component with web page compression settings;

[0008] Configuring HTTP cache parameters in a preset web browser, configuring routing parameters in the Nuxt component with web page compression settings to obtain a routing Nuxt component, and loading the routing Nuxt component into the web browser;

[0009] When the web browser receives a web page rendering address, conditional rendering processing is performed on the web page rendering address based on the routing Nuxt component to obtain a rendered web page.

[0010] Optionally, in the first implementation manner of the first aspect of the present invention, the configuration of splitChunks data in the preset Nuxt component to obtain the Nuxt component for web page segmentation settings includes:

[0011] In the configuration file of the preset Nuxt component, configure the build.splitChunks data and set the splitChunks attribute to true to obtain the Nuxt component for web page segmentation settings.

[0012] Optionally, in the second implementation manner of the first aspect of the present invention, the configuration of the webpack compression plugin in the Nuxt component for web page segmentation settings to obtain the Nuxt component for web page compression settings includes:

[0013] Add the optimization.minimizer option to the configuration file of the Nuxt component for web page segmentation settings, set the terser-webpack-plugin to compress JavaScript, and set the css-minimizer-webpack-plugin to compress CSS to obtain the Nuxt component for web page compression settings.

[0014] Optionally, in the third implementation manner of the first aspect of the present invention, the configuration of HTTP cache parameters in the preset web browser includes:

[0015] In the preset web browser, configure the Cache-Control and Expires response headers so that the web browser can cache data to generate static files.

[0016] Optionally, in the fourth implementation manner of the first aspect of the present invention, the configuration of the Cache-Control and Expires response headers further includes:

[0017] Set the effective period of Cache-Control.

[0018] Optionally, in the fifth implementation manner of the first aspect of the present invention, the conditional rendering process of the web page rendering address based on the Nuxt component for routing to obtain the rendered web page includes:

[0019] In the Nuxt component for routing, use the conditional rendering and component reuse functions of Vue.js to perform conditional rendering on the web page rendering address to obtain the rendered web page.

[0020] Optionally, in the sixth implementation manner of the first aspect of the present invention, after the conditional rendering process of the web page rendering address based on the Nuxt component for routing to obtain the rendered web page, it further includes:

[0021] Based on the props mechanism of the Vue library, the parameters of the routing Nuxt component are adjusted to obtain a new routing Nuxt component.

[0022] Optionally, in the seventh implementation manner of the first aspect of the present invention, the configuring routing parameters in the web page compression setting Nuxt component to obtain a routing Nuxt component includes:

[0023] Obtain routing parameters by using route.params;

[0024] Configure the routing parameters in the web page compression setting Nuxt component to obtain a routing Nuxt component.

[0025] The second aspect of the present invention provides a web page rendering device based on Nuxt components, including: 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 by a line; the at least one processor invokes the instructions in the memory to enable the web page rendering device based on Nuxt components to execute the above-mentioned web page rendering method based on Nuxt components.

[0026] The third aspect of the present invention provides a computer-readable storage medium, in which instructions are stored, and when it runs on a computer, it enables the computer to execute the above-mentioned web page rendering method based on Nuxt components.

[0027] In the embodiments of the present invention, by setting the code compression method and the HTTP caching method, the volume of the generated static files is reduced, the website loading speed is increased, a flexible customized page generation logic is provided, the requirements of various complex application scenarios are met, and the technical problems of large data and low flexibility when the current Nuxt components perform web page rendering are solved. Description of the Drawings

[0028] Figure 1 It is a schematic diagram of the first embodiment of the web page rendering method based on Nuxt components in the embodiments of the present invention;

[0029] Figure 2 It is a schematic diagram of a specific implementation manner of step 103 in the embodiments of the present invention;

[0030] Figure 3 It is a schematic diagram of an embodiment of the web page rendering device based on Nuxt components in the embodiments of the present invention. Detailed Embodiments

[0031] The embodiments of the present invention provide a web page rendering method, device and storage medium based on Nuxt components.

[0032] The embodiments disclosed in the present invention will be described in more detail below with reference to the accompanying drawings. Although some embodiments of the present invention are shown in the drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. On the contrary, these embodiments are provided to more thoroughly and completely understand the present disclosure. It should be understood that the drawings and embodiments of the present invention are only for exemplary purposes and are not used to limit the protection scope of the present invention.

[0033] In the description of the embodiments of the present invention, the term "comprising" and its like shall be understood as an open inclusion, that is, "including but not limited to". The term "based on" shall be understood as "at least partially based on". The term "an embodiment" or "the embodiment" shall be understood as "at least one embodiment". The terms "first", "second", etc. may refer to different or the same objects. There may also be other explicit and implicit definitions hereinafter.

[0034] For ease of understanding, the specific process of the embodiments of the present invention will be described below. Please refer to Figure 1 , an embodiment of the web page rendering method based on Nuxt components in the embodiments of the present invention includes:

[0035] 101. Configure splitChunks data in the preset Nuxt component to obtain a Nuxt component with web page segmentation settings;

[0036] In this embodiment, the code and resources are streamlined. In the configuration file (nuxt.config.js) of Nuxt.js, code splitting of webpack is achieved by configuring build.splitChunks to obtain a Nuxt component with web page segmentation settings.

[0037] Specifically, step 101 includes the following specific implementations:

[0038] 1011. In the configuration file of the preset Nuxt component, configure build.splitChunks data and set the splitChunks property to true to obtain a Nuxt component with web page segmentation settings.

[0039] In step 1011, splitChunks is set to true to extract common dependent modules into separate files, reduce duplicate loading, and optimize cache utilization. The specific code demonstration is as follows:

[0040]

[0041] 102. Configure a webpack compression plugin in the Nuxt component with web page segmentation settings to obtain a Nuxt component with web page compression settings;

[0042] In this embodiment, in the Nuxt component with modified web page segmentation settings, add the webpack compression plugin to the build configuration in nuxt.config.js, which can reduce the file size, compress JavaScript and CSS, and improve the loading speed.

[0043] Specifically, step 102 includes the following specific implementation:

[0044] 1021. Add the optimization.minimizer option to the configuration file of the Nuxt component for web page segmentation, set the terser-webpack-plugin to compress JavaScript, and set the css-minimizer-webpack-plugin to compress CSS to obtain the Nuxt component for web page compression settings.

[0045] In step 1021, compress JavaScript and CSS: In the build configuration in nuxt.config.js, configure the compression plugin of webpack through the optimization.minimizer option, use the terser-webpack-plugin to compress JavaScript, and the css-minimizer-webpack-plugin to compress CSS. This can reduce the file size and improve the loading speed. The specific code implementation can be as follows:

[0046]

[0047] 103. Configure the HTTP cache parameters in the preset web browser, configure the routing parameters in the Nuxt component for web page compression settings to obtain the Nuxt routing component, and load the Nuxt routing component into the web browser;

[0048] In this embodiment, modify the parameter settings of the HTTP cache, such as setting the response header parameter data, so that the browser can cache the generated static files. Set the routing configuration data in Nuxt, which is set in the.vue files in the pages directory or in nuxt.config.js to define the page routing rules to obtain the Nuxt routing component. Load the Nuxt routing component into the web browser to perform the functions of compressing static files and flexibly defining pages.

[0049] Specifically, "configuring the HTTP cache parameters in the preset web browser" in step 103 includes the following specific implementation:

[0050] 1031. In the pre - configured web browser, configure the Cache - Control and Expires response headers so that the web browser can cache data to generate static files.

[0051] In step 1031, configure the HTTP cache. Configure appropriate HTTP cache policies in web servers such as Nginx and Apache, for example, set the Cache - Control and Expires response headers so that the browser can cache the generated static files.

[0052] Specifically, step 1031 includes the following specific implementation methods:

[0053] 10311. Set the effective period of Cache - Control.

[0054] In step 10311, it is recommended to set the max - age parameter of Cache - Control to a relatively long time, which can be set to max - age = 604800, indicating that the file is valid for one week.

[0055] Specifically, please refer to Figure 2 , Figure 2 which is a schematic diagram of a specific implementation method of step 103 in the embodiments of the present invention. In step 103, "configure routing parameters in the Nuxt component of the web page compression setting to obtain the routed Nuxt component" includes the following specific implementation methods:

[0056] 1032. Use route.params to obtain routing parameters;

[0057] 1033. Configure the routing parameters in the Nuxt component of the web page compression setting to obtain the routed Nuxt component.

[0058] In steps 1032 - 1033, through dynamic routing configuration, the custom page generation logic can be realized, making the generation scheme more flexible. In the.vue file or nuxt.config.js in the pages directory of the routing configuration file of Nuxt.js, define flexible page routing rules through dynamic routing parameters and wildcards. Use the $route.params object to obtain dynamic routing parameters and display corresponding content according to different parameters in the page component. The dynamic routing parameters can be configured in nuxt.config.js. The specific code example is as follows:

[0059]

[0060] 104. When the web browser receives a web page rendering address, conditional rendering processing is performed on the web page rendering address based on the routing Nuxt component to obtain a rendered web page.

[0061] In an embodiment of the present invention, when the web browser receives a web page rendering address, rendering processing is performed on the web page rendering address by using the settings of the routing Nuxt component.

[0062] Specifically, step 104 includes the following specific implementation manners:

[0063] 1041. In the routing Nuxt component, the conditional rendering and component reuse functions of Vue.js are used to perform conditional rendering processing on the web page rendering address to obtain a rendered web page.

[0064] In step 1041, when using the conditional rendering and component reuse functions of Vue.js in Nuxt.js to perform conditional rendering processing on a web page, it can be implemented through the following code example:

[0065]

[0066]

[0067] In the above example, a Vue component containing conditional rendering is created, and which page component to display is determined according to the value of showPageA. In the created lifecycle hook, the value of the route parameter is obtained through this.$route.params.id, and the state of showPageA is set according to the parameter value, thereby determining which page component to display. In Nuxt.js, the conditional rendering and component reuse functions of Vue.js are flexibly used to perform conditional rendering processing on the web page. Different page contents are displayed according to different parameter values, realizing flexible page rendering logic.

[0068] Specifically, step 104 further includes the following specific implementation manners:

[0069] 1042. Based on the props mechanism of the Vue library, the parameters of the routing Nuxt component are adjusted to obtain a new routing Nuxt component.

[0070] In step 1042, when using routing in Vue, the Vue Router library can be used to manage the routing. The following is a simple example code demonstrating how to receive and process route parameters in a Vue component and display new content according to the processed parameter values. Create a Vue component and use Vue Router to define routing rules and pass parameters. The following is an example code implementation:

[0071]

[0072]

[0073] In the above example, a new component named NewComponent is created, which receives a route parameter: id. When the route / newcomponent / :id is matched, the NewComponent will be rendered, and the value of the route parameter can be obtained through props.match.params.id. With such code implementation, when accessing / newcomponent / 123, new content will be displayed, and corresponding processing and display can be performed according to the parameter value.

[0074] Figure 3 FIG. is a schematic structural diagram of a web page rendering device based on Nuxt components provided by an embodiment of the present invention. The web page rendering device 300 based on Nuxt components may vary greatly due to configuration or performance differences, and may include one or more processors (central processing units, CPUs) 310 (for example, one or more processors) and a memory 320, and one or more storage media 330 for storing application programs 333 or data 332 (for example, one or more mass storage devices). Among them, the memory 320 and the storage media 330 may be transient storage or persistent storage. The program stored in the storage media 330 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations on the web page rendering device 300 based on Nuxt components. Further, the processor 310 may be configured to communicate with the storage media 330 and execute a series of instruction operations in the storage media 330 on the web page rendering device 300 based on Nuxt components.

[0075] The web page rendering device 300 based on Nuxt components may further include one or more power supplies 340, one or more wired or wireless network interfaces 350, one or more input / output interfaces 360, and / or one or more operating systems 331, such as Windows Serve, Mac OS X, Unix, Linux, Free BSD, and so on. Those skilled in the art can understand that Figure 3 The shown structural diagram of the web page rendering device based on Nuxt components does not limit the web page rendering device based on Nuxt components, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0076] The present invention also provides a computer-readable storage medium, which can 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 run on a computer, the computer is caused to execute the steps of the web page rendering method based on Nuxt components.

[0077] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0078] Moreover, although the operations are depicted in a particular order, this should be understood as requiring that such operations be performed in the particular order shown or in sequential order, or that all illustrated operations be performed to achieve the desired result. In certain environments, multitasking and parallel processing may be advantageous. Similarly, although several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of the present disclosure. Certain features described in the context of separate embodiments can also be implemented in combination in a single implementation. Conversely, the various features described in the context of a single implementation can also be implemented separately or in any suitable sub-combination in multiple implementations.

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

Claims

1. A webpage rendering method based on Nuxt component, characterized in that: Includes steps: Configure splitChunks data in the preset Nuxt component to get the webpage segmentation setting Nuxt component; Configure a webpack compression plug-in in the webpage segmentation setting Nuxt component to obtain a webpage compression setting Nuxt component; Configure HTTP cache parameters in a preset web browser, configure routing parameters in the web compression setting Nuxt component, obtain a routing Nuxt component, and load the routing Nuxt component into the web browser; When the web browser receives the web page rendering address, conditional rendering processing is performed on the web page rendering address based on the routing Nuxt component to obtain a rendered web page; Wherein, after conditionally rendering the webpage rendering address based on the routing Nuxt component to obtain the rendered webpage, it also includes: Based on the props mechanism of the Vue library, the parameters of the routing Nuxt component are adjusted to obtain a new routing Nuxt component; Wherein, configuring the webpack compression plug-in in the webpage segmentation setting Nuxt component to obtain the webpage compression setting Nuxt component includes: Add the optimization.minimizer option in the configuration file of the webpage segmentation setting Nuxt component, set terser-webpack-plugin to compress JavaScript, set css-minimizer-webpack-plugin to compress CSS, and obtain the webpage compression setting Nuxt component; Wherein, configuring routing parameters in the webpage compression setting Nuxt component to obtain the routing Nuxt component includes: Use route.params to get route parameters; The routing parameters are configured in the webpage compression setting Nuxt component to obtain a routing Nuxt component.

2. According to the webpage rendering method based on Nuxt component according to claim 1, it is characterized in that: The splitChunks data is configured in the preset Nuxt component to obtain the webpage segmentation setting Nuxt component including: In the configuration file of the preset Nuxt component, configure the build.splitChunks data and set the splitChunks property to true to obtain the web page segmentation setting Nuxt component.

3. According to the webpage rendering method based on Nuxt component in claim 1, it is characterized in that: The configuring of HTTP cache parameters in the preset web browser includes: In the preset web browser, the Cache-Control and Expires response headers are configured so that the web browser can cache data to generate static files.

4. According to the webpage rendering method based on Nuxt component in claim 3, it is characterized in that: The configuration of Cache-Control and Expires response headers also includes: Set the effective period of Cache-Control.

5. The webpage rendering method based on Nuxt component according to claim 1, characterized in that: The conditional rendering process is performed on the webpage rendering address based on the routing Nuxt component to obtain the rendered webpage, including: In the routing Nuxt component, the conditional rendering and component reuse functions of Vue.js are used to perform conditional rendering processing on the web page rendering address to obtain a rendered web page.

6. A web page rendering device based on Nuxt component, characterized in that: The webpage rendering device based on the Nuxt component includes: a memory and at least one processor, the memory stores instructions, 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 web page rendering device based on the Nuxt component executes the web page rendering method based on the Nuxt component as described in any one of claims 1-5.

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 web page rendering method based on the Nuxt component as described in any one of claims 1 to 5 is implemented.

Images