Vue灰度发布新特性那些事儿

前言什么是灰度发布？百度百科的解释如下。灰度发布是指一种可以在黑白之间平滑过渡的发布方式。AB测试是一种灰度发布方式，让一部分用户继续使用A，一部分用户开始使用B，如果用户对B没有异议，然后逐步扩大范围，将所有用户迁移到B。灰度发布可以保证B的稳定性整体系统，在初始灰度阶段就可以发现问题并进行调整，保证其影响。从上面可以看出，灰度发布的主要作用有：降低直接全量发布的影响，让小部分用户优先使用新版本，有问题及时修复，以及验证无大问题后全面发布发布新功能通过新旧版本的数据对比，确定是否需要在自身业务场景中全面发布新版本。上面可以看到，常见的灰度发布方式有几种，各有优缺点。由于我们公司有完整的大数据AB测试方案，前端只需要关注接口返回的字段标识，就可以做具体的页面加载。Logic，今天重点讲一下如何在前端的Vue框架中做灰度发布。在Vue中，主要分为以下两种情况：组件级：组件级的动态控制只需要从后端返回相应的schemeID即可。页面级别：前端页面访问地址不变，AB测试标记字段与后端人员约定，前端根据该字段返回的不同内容加载相应的页面。新旧函数区分两个页面地址，跳转页面地址由后台控制。该方案的前端不需要太多改动，本文不再赘述。先来看看日常的处理方法。一个页面上可能有多个地方判断AB测试逻辑，或者同时进行多个AB测试。这样的页面代码逻辑复杂度比较高，而且不够干净易懂。当新增AB测试或者AB测试需要做决策时，修改代码的成本很高，降低了代码维护的效率。下面开始我们今天的正题，看看有哪些方法可以解决以上问题。如果组件层级只是两个小组件函数的简单灰度，可以直接用v-if处理如果有多个函数要同时测试，可以通过Vue的元素，通过添加一个特殊的isattribute来实现，可以根据接口或者其他前端计算得到currentTabComponent。页面级方案一：新入口页面分布添加新入口页面，将新旧版本页面升级为组件，入口页面添加接口查询，通过v-if还是通过Vue的元素添加一个特殊的is属性来加载页面组件。下面是通过接口查询代码的例子。通过接口预查询会带来一定的接口延迟加载，具体取决于接口的响应速度。我们也可以通过在URL中添加参数来获取。返回，避免接口查询。这里直接加载页面级组件这样会导致这个文件的大小增加。您可以将页面组件的加载方式改为异步组件，以提高页面加载速度。components:{'index-a':()=>import(/*webpackChunkName:"index-a"*/'./index-a'),'index-b':()=>import(/*webpackChunkName:"index-b"*/'./index-b')}方案2高阶组件方案从路由配置中的接口获取灰度标识数据进行路由分发。如果不想增加接口查询的开销，也可以从URL参数中返回标识数据。这种方法需要提前拼接好参数。高阶组件的好处是所有需要灰度的加载逻辑都在路由配置文件中，统一维护，组件可以复用。不需要为每个需要灰度的页面都添加一个入口文件。组件代码router.js配置{path:'originPath',component:()=>import('@/views/components/DynamicLoadComponent'),name:'originPath',props:(route)=>({renderComponent:newPromise((resolve,reject)=>{//根据路由的拼接参数获取加载页面if(route.query.testA){resolve(import('@/views/testA'));}else{resolve(import('@/views/testB'));}//或者根据接口getAPIData()返回的标识符动态加载页面.then((response)=>{if(response.testA){resolve(import('@/views/testA'));}else{resolve(import('@/views/testB'));}}).catch(reject);}),})}方案三动态Router.js介绍如果有大面积页面替换可以使用此方法。比如接口地址和返回的字段内容会因为后端开发语言的变化而发生变化。这样，会有一个过渡使用期。开发一个页面，上线一个页面后，可能有5个页面使用新方案，5个页面仍然保留原方案。改造router.js，将原来的路由配置提取到default.js中，然后创建java.js编写新的方案路由配置，根据前端计算或者接口返回标识动态加载路由配置文件。从“vue”导入Vue从“vue-router”导入路由器从“@/config”导入{isHitJavaAPI}Vue.use(Router)constrouter=newRouter({mode:'history'})constcomputedRouterDirectory=(routeFile)=>{让路由器配置；constrequireRouter=require.context('.',false,/\.js$/);routerConfig=requireRouter.keys().filter(file=>file===`./${routeFile}.js`)[0];如果(routerConfig){routerConfig=requireRouter(routerConfig)routerConfig.default&&router.addRoutes(routerConfig.default);}}if(isHitJavaAPI()){computedRouterDirectory('java')}else{computedRouterDirectory('default')}isHitJavaAPI方法是命中灰度逻辑。如果前端在这里做灰度，可以根据deviceID或者UA来计算。如果这是调用接口获取方案，需要改为同步调用。小结本文主要介绍几种页面级别的灰度方案。每种方案的试用场景各有优缺点。比如新增一个入口文件，主要是针对页面变化较大，当前项目只有一个在进行中。灰度测试；高层组件适用于当前项目正在进行的多次灰度测试，组件可以复用；动态加载路由配置文件主要针对目前项目中的大型页面UI或逻辑替换灰度测试；通过以上几种方案，可以大大提高代码的可维护性，灰度逻辑和业务代码逻辑脱钩。当灰度测试没有问题需要全面上线时，我们只需要修改入口逻辑即可。在业务代码中逐一修改灰度逻辑。除了本文介绍的几种方法外，还有其他的加载方式，比如通过路由钩子函数拦截后动态跳转，或者向后端请求，后端做重定向处理等，每种方式都有自己的优缺点，就看是不是最适合你当前场景的方案了。如果你有其他解决方案，欢迎留言和我们交流~参考VueRouter根据后台数据加载不同组件components-dynamic-async