动态路由为啥能减少白屏时间

Vue项目优化方案之：动态路由。

先看app.vue文件：

<template>
  <div>
    <div>
      <!-- 使用 router-link 组件来导航. -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </div>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

不用动态路由

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";

// 直接引入组件`Foo`和`Bar`
import Foo from '@/components/bar.vue'
import Bar from '@/components/foo.vue'
Vue.use(VueRouter);

// 定义路由
const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
];

// 实例化`VueRouter`
const router = new VueRouter({
  routes
});

// 将`router`作为参数实例化`Vue`。
const app = new Vue({
  el: "#app",
  render(h) {
    return h(App);
  },
  router
});

文件加载过程中会将解析的组件Foo和Bar都放入到app[xxx].js文件中：

如果项目比较大的话，将所有路由引入的组件放入到一个js文件中，无疑会让当前js文件过大，资源拉取过程中让首屏渲染的等待时间过长，进而让白屏时间过长。

使用动态路由

我们将代码：

import Foo from '@/components/bar.vue'
import Bar from '@/components/foo.vue'

替换成动态引入的方式：

const Foo = () => import('./components/foo.vue');
const Bar = () => import('./components/bar.vue');

1、无路由状态

2、点击进入Foo路由

3、点击进入Bar路由

使用动态路由时，首次渲染并未进行Foo和Bar文件的拉取，只有点击进入Foo和Bar路由时才会去拉取对应的js文件。当再次切换时，Foo和Bar对应的文件都已存在，无需进行拉取。

总结

我们知道Vue项目是单页面应用，首次加载时拉取的文件大小会影响到白屏时间，通过动态路由可以将路由部分拆分成单独的 js文件，只有在进入组件的时候才进行文件的拉取，可以起到优化白屏时间的作用。