Shulou(Shulou.com)06/03 Report--

The main content of this article is "how to improve the loading speed of the home page of the Vue project", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to improve the loading speed of the home page of the Vue project.

The reason for the slow opening of the home page

In fact, the process of loading a page in a browser is to download the resources needed for the project from the server through the http protocol, download the html js image file to the local parsing and display it. If the loading speed of the web page is slow, it cannot be opened for the following reasons:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

The Bug of the program itself causes the page to load abnormally

The resource of the project is too large (if the js is large), it takes a long time to access the required resources obtained by the browser from the server.

The network speed is slow, etc.

Therefore, when this problem occurs in our project, as long as F12 opens the console of the browser and looks at the time spent on the requested resources in network, you can find out the problem. Through observation, the front-end single-page applications are generated by js, because it is spa, and all the renderings are on scripts, and it takes time for js to execute. In addition, it takes time to load the js, so the larger the page, the longer the loading time, and the longer the js execution time, so there will be a white screen.

How to solve this problem

The reason for this problem is that our project has too many resources after packaging, so we can try our best to reduce the size of the optimized packaged file, so the problem can be easily solved. How to optimize usually has the following points:

Lazy loading of routed components is used to load components on demand, so that the corresponding components are loaded only when the route is accessed, rather than directly when the home page is loaded.

{path: "/ usercenter/personal", title: "personal Information", component: resolve = > {require (["@ / views/usercenter/personal.vue"], resolve); / / can be loaded dynamically via requie}}

Load components asynchronously

Since it is an asynchronous load, there will be exceptions such as load failure. What should I do at this time? Look at another feature found on the official website.

This will perfectly solve our doubt that the wrong component will be displayed when the asynchronous component fails to load.

1. Disable map files generated online

After the npm run build compilation, we looked at the compiled files and found that there were a lot of .map files, which also took up a lot of space. The purpose of the .map file is to help debug the compiled code, but the code we launched has been debugged, so the .map file can not be generated when it is launched.

ProductionSourceMap: false / / configure webpack. The productionSourceMap value is false.

two。 Enable gzip compression for Nginx

Add the following code to http {} in nginx.conf:

Gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 1; gzip_buffers 168k; gzip_http_version 1.0; gzip_min_length 256; gzip_types text/plain text/css application/jsonapplication/x-javascript text/xml application/xmlapplication/xml+rss text/javascript application/vnd.ms-fontobjectapplication/x-font-ttf font/opentype image/svg+xml image/x-icon image/jpeg image/gifimage/png

After configuration, restart the service and revisit the website to check whether it is effective in the console.

3. For some general tool libraries can be introduced by CDN, such as Jquery, introduced from CDN in index.html, remove the component import of other pages, modify webpack.base.config.js, and add this component to externals.

4. Server-side SSR rendering. SSR needs to make some corresponding adjustments to the page architecture, which is slightly more complex. For more information, please see https://segmentfault.com/a/1190000015964813.

5. Code level optimization, wizard diagram, component modularization, optimize code logic, improve code reusability and so on.

At this point, I believe you have a deeper understanding of "how to improve the loading speed of the home page of the Vue project". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.