This is my first article on getting started

What is lazy route loading

When you open a browser and visit a website, the default is to load all pages as soon as you open it. Lazy routing loads only the module you are currently clicking on. Load resources corresponding to routes on demand to improve the loading speed of the first screen (Tip: The home page does not need to set lazy loading, and after a page is loaded again, the page will not be loaded again).

Realize the principle of

Instead of importing routing components directly, write them as asynchronous components that are loaded only when functions are called.

Traditional Route Configuration

import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home }
  ]
export default router
Copy the code

Lazy route loading

import VueRouter from 'vue-router' //const Login = ()=> { // return import('@/views/login/index.vue') //} //const Home = ()=> {// return import('@/views/home/home.vue') //} Const Login = ()=> import('@/views/ Login /index.vue') const Home = ()=> import('@/views/ Home /home.vue') Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/login', component: Login }, { path: '/home', component: Home } ] export default routerCopy the code

Simplifying again (leaving out defining variables)

import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
const router = new VueRouter({
 routes: [
    { path: '/login', component: () => import('@/views/login/index.vue') },
    { path: '/home',  component: () => import('@/views/home/home.vue') }
  ]
 
export default router
Copy the code

conclusion

On demand to load the resources corresponding to the route, improve the first screen loading speed, code implementation is very simple, but greatly improve the response speed.