前情回顾：
子项目按需加载
经过上两篇文章，想必大家对kfc已经有了一定的了解了，目前为止每个子项目都各自打包到自己的js中，那么当这个子项目业务越来越多文件的体积也会越来越大。接下来我们来看下子项目的优化
在router中引入模块方式的改变
//原
import index from '../views/index.vue';
//现
const index = () => import(/* webpackChunkName: "index-module"*/ '../views/index.vue');
在build/webpack.prod.confg.js配置中修改配置
output: {
jsonpFunction: 'xxxxxx'
}
每个子项目的jsonpFunction都不要重复，不然会找不到对应的需要加载的模块。
经过以上修改就能实现子项目的按需加载了。某些有关联的页面打成一个包，或者页面复杂的单独打成一个包等等，灵活组合。
公共模块
在我们的业务中，我们把header和menu及用户信息，权限信息等作为公共模块。我们用原生js生成header，menu的dom及公共的类，类里包含user信息，权限信息，租户信息，下面来上下整体架构图
我们没有把公共模块做成vue的组件，因为做成组件后不能敏捷开发，每次修改都要publish到私源上，然后各业务线还得npm install最新的。
公共模块直接本地开发，然后上传到静态资源服务器，各业务线直接引入，当更新了新功能后，各业务线只需刷新页面即可看到最新效果。简单粗暴高效
那么细心的同学肯定会发现一个严重问题：你的公共模块里有用户信息，我子项目要使用的时候可以直接调用，但是怎么保证公共模块先于vue渲染完成呢，不然会是undefined啊！！！
下面来介绍下我是怎么做的：
window.Common.doVue(() => {
new Vue({
el: "#app",
router: router,
template: "<App/>",
components: {
App
}
});
})
Common是公共模块，当公共模块请求完接口后运行doVue回调。
总结
其实还有很多细节问题。比如：keep-alive缓存问题（list页的时候缓存页面状态，详情页不缓存，但是点击菜单导航清除缓存），跨子项目的通用组件集成等等。
我在不断优化KFC，目前基于此的业务已经稳定运行一年多了，希望能给广大的前端开发者另一种前端微服务的思路和方向，如果有问题可以在github上提问题一起探讨（传送门）。一句话，业务模式决定架构方式，希望我这套架构方式能帮到更多的人
