Detailed explanation of vue-router lazy loading (with code)

This time I will bring you a detailed explanation of vue-router lazy loading (with code). What are the precautions when using vue-router lazy loading? The following is a practical case, let's take a look.

Everyone who has used vue-router knows that it can implement lazy loading of module js, that is, only load the js script file of the corresponding module when needed to speed up the display of the homepage. For example, only when the user clicks a certain "User Information" button or menu for the first time, the user will click

. This time I will bring you what are the precautions. The following is a practical case, let's take a look.

Load the js component of the "User Information" module.

The implementation of lazy loading relies on the function of AMD mode require function under webpack. Webpack will generate an independent js file from the asynchronous require file. When calling, it will download the js asynchronously and execute it after completion. The key code implemented in the development project is:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

But there is a problem here: starting from the user clicking the "User Information" menu, to the completion of js file download , due to downloading from the network js has a time delay, during which the user interface does not respond at all, making users feel that clicking on it is ineffective, and they often click again. This is especially true when the js file is large and the network speed is slow. Therefore, it is necessary to add a Loading loading prompt in this process.

We analyze this line of code:

resolve => require(['./basicInfo.vue'], resolve)

It is a function that executes the require process, and then calls resolvecallback function after it is completed. We only need to encapsulate it, display Loading before require is executed, and then hide Loading when the callback is completed and executed, and this requirement will be achieved. As follows:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

The code for displaying and hiding Loading can be processed according to your own UI framework. For example, element-ui:

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to upgrade vue cli to webapck4

vue-cli 3.0 Beginners must know

D3.js realizes dynamic dial effect

The above is the detailed content of Detailed explanation of vue-router lazy loading (with code). For more information, please follow other related articles on the PHP Chinese website!