vue的route懒加载

vue的route懒加载

为什么用懒加载

​ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，用户会将这个打包后的js代码加载进来，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验。

​ 而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。使得页面变得流畅，让用户体验增加。

1.没有route懒加载

当我们使用webpack打包，webpack会将我们写的项目中的js代码打包成下面类似的三个文件：

• dist\js\chunk-vendors.xxx.js
• dist\js\app.xxx.js
• dist\js\about.xxx.js

其中app开头的js文件是我们编写的业务逻辑代码。

有vendors字段的js文件是第三方提供商的代码库（第三方库）。

剩下的文件就是做底层代码支撑的js文件。有时候这个文件会叫做manifest.xxx.js或者about.xxx.js

导致结果

这样打包的js文件会很大，当我们的客户去加载这些首页时，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验。要加载整个js文件就要浪费很多时间了，打开首页这么慢用户当然不满意的啦！！！

如何解决呢？

说到如何解决，其实是很简单的事情，我们只需要把我们的业务逻辑代码分成很多块，当用户查看哪个组件，那么就加载下载哪个对应组件的js业务逻辑代码，这样做进入首页不用一次加载过多资源造成用时过长！！！而且也减轻服务器负载（不用将整个代码传送），用户的体验也会得到很好的提升（看哪部分，就加载哪部分，速度很快）。

2.使用route懒加载

route懒加载写法很简单，打包后的app.xxx.js 文件下的目录会多出很多个js文件，如：0.xxx.js，1.xxx.js等，这些JS文件就对应vue的组件啦，当用户查看页面时，需要这些渲染组件时，将会向服务器请求这些对应组件的代码。

import VueRouter from 'Vue-router'
import Vue from 'vue'

//懒加载（懒加载有很多种写法，这里是最简单的一种）
//不在是直接导入，而是加载时才import
const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')
const Baz = () => import('./Baz.vue')

Vue.use(VueRouter)   
const routes = [
    {   
        path:'/Foo',
        component:Foo
    },
    {   
        path:'/Bar',
        component:Bar
    },
    {   
        path:'/Baz',
        component:Baz
    }
    
] 

const router = new VueRouter({routes})
export default router;