问题
一个单页面应用，采用组件化的开发模式，没有采用懒加载，运用webpack打包，每次启动首页都会加载全部组件，但此时只是访问了首页而已，就造成了大量组件污染加载的情况。
需求
只在访问当前页面时加载对应组件，避免页面组件全部加载。
解决
我们可以通过实现路由懒加载和异步组件解决问题。
在项目中的具体实现
路由懒加载
在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'