vue-router lazy loading optimizes loading speed

This time I will bring you vue-router lazy loading to optimize the loading speed. What are the precautions for vue-router lazy loading to optimize the loading speed? The following is a practical case, let's take a look.

Lazy loading: also called delayed 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)
  }
 ]
})

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

Recommended reading:

Tips for using regular expressions in Linux

##vue-infinite-loading creates an infinite loading effect

The above is the detailed content of vue-router lazy loading optimizes loading speed. For more information, please follow other related articles on the PHP Chinese website!