我们在用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载。
我们都知道图片的懒加载。当图片不出现在视口时，我们不加载这张图片。那么我们是不是可以实现，路由的懒加载。当我们用到某个路由后，才去加载对应的组件，这样就会更加高效。
实现这样的功能，我们需要<strong>结合Vue的异步组件和webpack的code splitting feature。</strong>
下面开始研究路由的懒加载如何实现，以及它的效果。
首先，我们创建一个webpack模板的项目
vue init webpack my-project
cd my-project
npm install
我们添加路由，看下默认情况下，单页应用如何加载js。
我们先在src/components/创建一个文件New.vue
<template>
<div>
<h1>vue-router懒加载</h1>
<h2>new doc</h2>
</div>
</template>
<script>
export default { }
</script>
<style>
h1 {
color: red;
}
</style>
在App.vue 文件添加两个链接
<template>
<div id="app">
<router-link to="/">Go to hello</router-link>
<router-link to="/new">Go to new</router-link>
<router-view></router-view>
</div>
</template>
在src/router/index.js 文件中添加路由
import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'
import New from 'components/New'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/new',
name: 'New',
component: New
}]
})
现在我们打包文件
npm run build
打包完后，打开页面（如何不能打开，请自行解决。我配置了nginx，所以可以直接打开）
http://localhost/mall/dist/index.htm#/
我们看下，打开网页后，加载了哪些资源。
1.png
现在，我们切换路由
http://localhost/mall/dist/index.htm#/new
我们发现，没有新的资源加载。
因为一次性加载了所有js。如果你的应用很大，那么这个时候应用打开会很慢。
用路由懒加载，看看效果如何
修改src/router/index.js 文件
import Vue from 'vue'
import Router from 'vue-router'
// import Hello from 'components/Hello'
// import New from 'components/New'
Vue.use(Router)
// 把路由对应的组件定义成异步组件
const Hello = resolve => {
require.ensure(['components/Hello.vue'], () => {
resolve(require('components/Hello.vue'))
})
}
const New = resolve => {
require.ensure(['components/New.vue'], () => {
resolve(require('components/New.vue'))
})
}
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/new',
name: 'New',
component: New
}]
})
打包成功后，再打开页面
http://localhost/mall/dist/index.htm#/
看下此时加载的资源
2.png
对比上一次，我发现此时加载的资源多了一个js文件。而这个js文件的内容包含了Hello.vue文件的所有内容。
下面我们切换路由
http://localhost/mall/dist/index.htm#/new
3.png
发现新加载了一个js文件。打开这个js,发现其中包含了，New.vue文件的所有内容。
现在，我们实现了按需加载组件，而不是一次性将所有js加载完。不必担心一次性加载完，导致页面迟迟打不开的情况。
修改New.vue文件
<script>
//增加了axios模块的引用
import axios from 'axios'
console.log(typeof axios, 11)
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
打包后，打开文件
http://localhost/mall/dist/index.htm#/new
你会发现用来异步加载New组件的js增大了很多，这是因为其中包含了axios的代码。
好了，路由懒加载的实现就这么简单。更多内容请看官方文档
