问题
一个单页面应用，采用组件化的开发模式，没有采用懒加载，运用webpack打包，每次启动首页都会加载全部组件，但此时只是访问了首页而已，就造成了大量组件污染加载的情况。
需求
只在访问当前页面时加载对应组件，避免页面组件全部加载。
解决
我们可以通过实现路由懒加载和异步组件解决问题。
文档资料：
异步组件：组件-Vue.js
路由懒加载：懒加载·GitBook
在项目中的具体实现
路由懒加载
在vue项目中使用路由懒加载非常简单，我们要做的就是把路由对应的组件定义成异步组件:
router.js
// 单独引入
import App from '../App'
// 其他路由异步加载
// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point，实现代码分割
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
const city = r => require.ensure([], () => r(require('../page/city/city')), 'city')
export default [{
path: '/',
component: App, //顶层路由，对应index.html
children: [ //二级路由。对应App.vue
//地址为空时跳转home页面
{
path: '',
redirect: '/home'
},
//首页城市列表页
{
path: '/home',
component: home
},
//当前选择城市页
{
path: '/city/:cityid',
component: city
// or
//component: resolve => { require(['../page/city/city'], resolve); }
}
]
}]
注意
文档：webpack 如何使用 require.ensure() 进行代码拆分。
// require.ensure()语法：
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
require接收三个参数：
- 第一个参数是一个数组，表示所依赖的模块，例如['moduleA', 'moduleB']
- 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用
- chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
如上述例子中的home和city组件，分别被打包到两个chunk中，每个组件加载时都只会加载自己对应的代码，可以加快渲染速度！
main.js
最后，不要忘记在main.js将router引入。
import routes from './router/router'
