我们都知道,路由懒加载是新能优化的一种表现,但这种表现的具体内容是怎么样的呢?
一、按需引入形式的路由懒加载,将每个组件生成一个独立的 js文件,进行按需引入
1.首先是普通的路由加载。页面首次加载时,浏览器就把路由中的所有的组件一股脑的全加载到app.js中。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from "../views/About.vue"
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: '路飞是乔伊波伊',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
component:About
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
views中的about
<template>
<div class="about">
<h1>This is an about page </h1>
about中的乔伊波伊
</div>
</template>
此时,app.js的内容大小是113kB,
现在!,看下app中的有什么内容
可以发现,about组件中的内容,已经被加载到app.js中,但是这时我还没有叫它加载about中的内容。
2.再看下,路由懒加载的方式加载页面。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: '路飞是乔伊波伊',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
app.js内容的大小是104kB
并且,没有在app中搜到about组件中的内容,说明没有被加载出来,也就少了9kB,
这是一个组件节省的大小,如果更多组件,那么他的一个提升性能的空间就越大。
二、component: (resolve) => { require(['@/views/About.vue'], resolve) }的路由懒加载