路由懒加载与性能优化

我们都知道，路由懒加载是新能优化的一种表现，但这种表现的具体内容是怎么样的呢？

一、按需引入形式的路由懒加载，将每个组件生成一个独立的 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) }的路由懒加载