Use vue-router lazy loading to solve the slow speed problem caused by too many resources when loading for the first time

This article mainly introduces vue-router lazy loading to solve the slow speed problem caused by too many resources when loading for the first time. The article separately introduces the vue router routing lazy loading problem. Friends who need it can refer to it

Lazy loading: also called lazy loading, that is, loading when needed and loading as needed.

Single-page applications like vue, if there is no application lazy loading, the files packaged with webpack will be abnormally large, resulting in too much content to be loaded when entering the homepage, and the time will be too long, and an error will occur. Ah, first of all, a long white screen is not conducive to the user experience even if loading is done. Using lazy loading can divide the page and load the page when needed, which can effectively share the loading pressure on the homepage and reduce the loading time of the homepage. .

To put it simply: enter the home page without loading too many resources at once, which will cause it to take too long! ! !

Lazy loading method:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
 routes: [
  {
    path:'/',
    component:resolve => require(['@/components/index'],resolve)
  }
 ]
})

Non-lazy loading method:

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
  {
    path:'/',
    component:index
  }
 ]
})

ps : Let’s take a look at vue-router routing lazy loading

When writing a single-page application with vue.js, the packaged JavaScript package will be very large, affecting page loading. We can use routing Lazy loading is used to optimize this problem. When we use a certain route, we will load the corresponding component, which will be more efficient. The implementation code is as follows:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

The above is what I compiled for everyone. I hope It will be helpful to everyone in the future.

Related articles:

AJAX simple asynchronous communication example analysis

AJAX processing method for XML returned by the server

Detailed explanation of AJAX mechanism and cross-domain communication

The above is the detailed content of Use vue-router lazy loading to solve the slow speed problem caused by too many resources when loading for the first time. For more information, please follow other related articles on the PHP Chinese website!