vue-router路由的懒加载

一、前言

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 如图所示，如果没有使用懒加载，我们的业务代码都在那个app开头的js文件里，随着业务的增加，代码量越来越多，js文件也越来越大，用户首次访问页面时可能会出现短暂的白屏。

三个js文件的作用：

• app开头的.js文件：自己编写的业务代码
• manifest开头的.js文件：为打包的代码做底层支撑。例如我们在项目中使用了ES6的或者CommonJS的导出导出规则，这个js文件可以对这些规则进行处理。
• vendor开头的.js文件：第三方的js代码，例如vue、vue-router的代码
• index.html文件引入的是 app开头.js文件

---

二、使用路由懒加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。路由懒加载 | Vue Router官网

懒加载的方式：

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
    
    
  routes: [
    {
    
     path: '/foo', component: Foo }
  ]
})