基于vue的前端微服务架构解决方案3-子项目优化

·  阅读 806

前情回顾:

基于vue的前端微服务架构解决方案1-基础篇

基于vue的前端微服务架构解决方案2-插件分离

子项目按需加载

经过上两篇文章,想必大家对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上提问题一起探讨(传送门)。一句话,业务模式决定架构方式,希望我这套架构方式能帮到更多的人

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改