Vue Ultimate Performance Optimization Solution (Solves the problem of slow loading on the homepage)

Preface

After the vue development project was launched, I found that the homepage loading speed was very slow. If the project is relatively large, it may even wait for more than 10 seconds. The user experience is very poor. Just imagine if you are planning to buy a pair of AJs and log in to the homepage of Taobao and wait for 5 seconds, you will definitely choose Moduoduo decisively.

Taking our company's project as an example, a blank page of more than ten seconds will appear after entering the URL. If it is still acceptable to the backend management system, the nested H5 faces C-end users, and the product will definitely not be acceptable.

After careful analysis, it was mainly because the package was too large, and some plug-in installation packages we quoted were loading slowly. I searched many solutions to slow loading on the Internet. The final optimization time was more than 2 seconds for the mobile H5 page and more than 5 seconds for the background management system.

1. Lazy loading of routes

{
    path: '/chinaWine',
    name: 'chinaWine',
    component: resolve => require(['./views/chinaWine'], resolve)
},

This method will separate the original package into one file into multiple js files, which will reduce the size of a single file, but will not reduce the size of the entire js folder.

In this way, you can load on demand and only load the js files of a single page.

2. Remove the map file from the package file

The package is too large, and there are also some generated map files. Remove the excess map file first.

Find the file in the config folder and change the productionSourceMap in this build to false

3. CDN introduces third-party libraries

In project development, we will use many third-party libraries. If we can introduce them on demand, we can only introduce the components we need to reduce the space occupied.

However, there are also some that cannot be introduced as needed. We can use CDN external loading to import components from CDN, remove component imports from other pages, modify them, and add this component to externals. This is to avoid errors caused by component failure during compilation.

4. Gzip package

Gizp compression is an http request optimization method that improves loading speed by reducing file size.

HTML, js, css files and even json data can be compressed using it, which can reduce the volume by more than 60%.

1、npm i -D compression-webpack-plugin

2. Configure in

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
    if (.NODE_ENV === 'production') {
        return {
            plugins: [new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240,
                deleteOriginalAssets: false
            })]
        }
    }
}

3. Configure in NGINX

http {
    gzip  on;
    gzip_min_length    1k;
    gzip_buffers        4 8k;
    gzip_http_version  1.0;
    gzip_comp_level    8;
    gzip_proxied        any;
    gzip_types          application/javascript text/css image/gif;
    gzip_vary          on;
    gzip_disable        "MSIE [1-6]\.";
    #The following configurations are omitted...}

nginx -s reload: After modifying the configuration, reload takes effect

5. The ultimate move, pre-rendering

In fact, after completing the above optimization, it will be fine to optimize it within 5 seconds, but if we have more than 100 front-end pages like our company, it may still be a bit slow.

We have done so much above, all of which are based on rendering after js execution. If you want to be faster, there are two other solutions, one is SSL, that is, server-side rendering, and the other is pre-rendering.

Pre-rendering generates a static page of the homepage before js is loaded, which is used for loading, and will not let you wait. Needless to say, the performance of the static page is, soooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Prerendering relies on the prerender-spa-plugin plugin, which is very simple to use, but there are many pitfalls. If you don’t respect it in a place, you will report an error:

1、cnpm install prerender-spa-plugin --save-dev

It is recommended to use cnpm with Taobao mirror, because npm installation often fails, and he learned a lesson from blood and tears, and he spent the whole morning.

2、

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = ;

existpluginsunder，turn uppluginsObject，Just add it to it
// Pre-rendering configurationnew PrerenderSPAPlugin({
    //Requirements - Give the WebPack - Output application path pre-rendering.    staticDir: (__dirname, 'dist'),
    //Required, route to render.    routes: ['/login'],
    // Must, the actual renderer to be used, if not, it cannot be precompiled    renderer: new Renderer({
        inject: {
            foo: 'bar'
        },
        headless: false, //The browser window is displayed during rendering.  Very useful for debugging.        //Waiting for rendering until the specified element is detected.        //For example, use `(new Event('custom-render-trigger'))` in the project entrance.        renderAfterDocumentEvent: 'render-event'
    })
})

3、

You need to set the router mode of vue to history mode

4、

Add an event to the mounted where the vue instance is created, which corresponds to the renderAfterDocumentEvent in the PrerenderSPAPlugin instance.

mounted () {
    (new Event('render-event'))
 },

This is the basic configuration of pre-rendering. npm run build. If there are too many dist folders that you want to pre-render, then congratulations, it's successful! If the project is a proxy made by nginx, nginx also needs to make some configuration, which is:

location = / {
  try_files /home/ /;
}

location / {
  try_files $uri $uri/ /;
}

Depending on the specific route you want to render

Although it took a day to implement pre-rendering, because the project used hash routing before, the pre-rendering needed to be changed to history mode and needed to modify the login address. Our company used thousands of terminal merchants and planned to be forced to abort. But it is indeed very fast, suitable for the backend and new projects you use.

Summarize

This is the article about vue ultimate performance optimization solution (solving the problem of slow loading on the homepage). For more related vue ultimate performance optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!