How to deal with the slow speed caused by too many resources being loaded for the first time during lazy loading of vue-router

This time I will show you how to deal with the slow speed caused by too many resources loaded for the first time when lazily loading vue-router. Note What are the matters ? Below are actual cases, let’s take a look at them.

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-routerroutinglazy loading

When writing a single-page application with vue.js, the packaged JavaScript will appear The package is very large and affects page loading. We can use lazy loading of routes to optimize this problem. When we use a certain route, we will load the corresponding components. This 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 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:

Using React Router v4 from scratch

How to use JS to dynamically add HTML tags

The above is the detailed content of How to deal with the slow speed caused by too many resources being loaded for the first time during lazy loading of vue-router. For more information, please follow other related articles on the PHP Chinese website!