路由组件的懒加载

定义：

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

为什么要使用路由懒加载：

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

 

未使用懒加载打包生成的js,其中app.js 是我们自己写的代码

这样打包不是很好，比如说项目中有三个路由，首页加载只需要第一个路由，另外两个不加载，但三个路由的代码都打包到app.js中了，请求第一个路由，就把app.js三个路由的代码都加载了，加载了多余的代码，我们应该加载第一个路由时，只向服务器请求第一个路由的文件，这可怎么办么，就用到了我们刚才说的懒加载。

使用：

const Foo = () => import('./Foo.vue')
// 异步加载  当请求此路由时，加载路由文件，返回路由

Foo此时是一个函数

这个有两个作用：

1.分割代码，将路由文件单独打包

2.懒加载

 

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo } // 刚开始Foo是一个函数，没有运行，需要的时候才运行，返回路由组件
  ]
})

 

我们将三个路由进行懒加载，打包，如下：

多出来的三个文件就是我们进行懒加载的路由js

当我们请求路由1时，才会去服务器请求 0.js文件，请求路由2时，才会去服务器请求 1.js文件...

 

组件懒加载：

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>