Detailed explanation of the steps to solve the slow first loading speed of vue-router lazy loading

This time I will bring you a detailed explanation of the steps for vue-router lazy loading to solve the slow first loading speed. vue-router lazy loading to solve the slow first loading speed. What are the precautions?. Here are the actual cases. One Get up and take a look.

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:

JS dynamic operation of HTML tags

##Detailed explanation of using React Router v4

How BubbleTransition implements page switching function

The above is the detailed content of Detailed explanation of the steps to solve the slow first loading speed of vue-router lazy loading. For more information, please follow other related articles on the PHP Chinese website!