This time I will bring you the addition of loading during the lazy loading process. What are the precautions for adding loading during the lazy loading process? 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 a user clicks a "User Information" button or menu for the first time, the js component of the "User Information" module is downloaded. The implementation of lazy loading relies on the function of AMD moderequire 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加入路由表中
resolve => require(['./basicInfo.vue'], resolve)
const basicInfo = { path: '/user', component: resolve => { [显示Loading] require(['./basicInfo.vue'], component => { [隐藏Loading] resolve(component) }) } };
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)) } };
JS implementation stays in the interface prompt box
Detailed explanation of the 4 steps of vue cli upgrade webpack
The above is the detailed content of Add loading during lazy loading. For more information, please follow other related articles on the PHP Chinese website!