我们在用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载。
我们都知道图片的懒加载。当图片不出现在视口时,我们不加载这张图片。那么我们是不是可以实现,路由的懒加载。当我们用到某个路由后,才去加载对应的组件,这样就会更加高效。
实现这样的功能,我们需要结合Vue的异步组件和webpack的code splitting feature。
下面开始研究路由的懒加载如何实现,以及它的效果。
首先,我们创建一个webpack模板的项目
vue init webpack my-project
cd my-project
npm install
我们添加路由,看下默认情况下,单页应用如何加载js。
我们先在src/components/创建一个文件New.vue
vue-router懒加载
new doc
export default { }
h1 {
color: red;
}
在App.vue 文件添加两个链接
![](./assets/logo.png)
Go to hello
Go to new
在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文件
//增加了axios模块的引用
import axios from 'axios'
console.log(typeof axios, 11)
export default {
name: 'hello',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
打包后,打开文件
http://localhost/mall/dist/index.htm#/new
你会发现用来异步加载New组件的js增大了很多,这是因为其中包含了axios的代码。
好了,路由懒加载的实现就这么简单。更多内容请看官方文档