一般情况下，Vue的单页面应用是一次性把所有的组件都在加载出来的，但实际上访问应用的人不一定会访问到所有组件，所以我们就需要按需加载组件，就是用到哪个组件才加载哪个组件，这样既不浪费资源，又加快了加载速度。 这里我们用到了组件的懒加载技术。
工具/原料
1
Webpack(3.12.0)
2
Vue工程(2.6.10)
3
Chrome浏览器
方法/步骤
1
首先，我们不使用懒加载技术，启动工程，来到登录页面（登录组件Login.vue）
2
然后，我们按F12打开Chrome的开发工具， 进入到Network tab页，我们可以看到app.js(1.4M), 这个是工程打包后的js文件，所有的js都在这里。
4
那我们在访问Login.vue组件的时候实际上无需加载其他两个组件。此时，我们只需修改router文件index.js添加import功能，并且在webpack.base.conf.js文件中添加chunkFilename配置，如图
5
添加完后，我们刷新页面，再看chrome开发工具中的网络加载情况。我们发现原来的app.js变成1.1M了，并且还多出一个0.js文件，app.js包含一些公用js文件，0.js是Login.vue组件对应的部分代码291K，当进入到CheckAccessCode页面时，会再出现一个1.js共20K，这个是CheckAccessCode.vue所对应的代码
6
至此，首页优化完毕，其实复杂场景里一个组件里会包含其他组件， 被包含的组件也可以做懒加载处理。
注意事项
更多细节具体可以参考vue的官方文档的“处理加载状态”模块
上一篇：银行卡显示该用户不存在怎么回事