快捷導(dǎo)航

淺談Vue灰度發(fā)布新功能的使用

更新時(shí)間：2022年04月28日 09:12:10 作者：大轉(zhuǎn)轉(zhuǎn)FE

本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

灰度發(fā)布是指在黑與白之間，能夠平滑過(guò)渡的一種發(fā)布方式。AB test就是一種灰度發(fā)布方式，讓一部分用戶繼續(xù)用A，一部分用戶開(kāi)始用B，如果用戶對(duì)B沒(méi)有什么反對(duì)意見(jiàn)，那么逐步擴(kuò)大范圍，把所有用戶都遷移到B上面來(lái)?；叶劝l(fā)布可以保證整體系統(tǒng)的穩(wěn)定，在初始灰度的時(shí)候就可以發(fā)現(xiàn)、調(diào)整問(wèn)題，以保證其影響度。

從上可以看出，灰度發(fā)布的主要作用有以下幾點(diǎn)：

降低直接全量發(fā)布帶來(lái)的影響，讓少部分用戶先使用新版本，如發(fā)現(xiàn)問(wèn)題則及時(shí)做好修復(fù)，驗(yàn)證無(wú)重大問(wèn)題則全量發(fā)布新功能
通過(guò)新老版本的數(shù)據(jù)對(duì)比，決定新版本是否需要全量發(fā)布

概述

灰度發(fā)布的方式有很多，按端可以區(qū)分服務(wù)端，客戶端，Web前端都可以做，沒(méi)有最好，只有更適合自己的業(yè)務(wù)場(chǎng)景。

如上可以看到常見(jiàn)的幾種灰度發(fā)布的方式，都有各自的優(yōu)缺點(diǎn)，由于我們公司有完善的大數(shù)據(jù)AB test方案，所以前端只需關(guān)注接口返回的字段標(biāo)識(shí)，來(lái)做具體的頁(yè)面加載邏輯，今天重點(diǎn)講述在前端中使用Vue框架中如何做灰度發(fā)布。在Vue中主要可以分為以下兩種情況：

組件級(jí)別：

組件級(jí)別動(dòng)態(tài)控制只需后端回傳對(duì)應(yīng)方案標(biāo)識(shí)即可。

頁(yè)面級(jí)別：

前端頁(yè)面訪問(wèn)地址不變，同后端人員約定好AB test 標(biāo)記字段，前端根據(jù)字段返回不同的內(nèi)容加載對(duì)應(yīng)的頁(yè)面。
新舊功能區(qū)分兩個(gè)頁(yè)面地址，跳轉(zhuǎn)頁(yè)面地址由后端控制，此方案前端不需要太多改動(dòng)，此文就不多說(shuō)明。

先來(lái)看看日常處理的方式，一個(gè)頁(yè)面可能會(huì)存在多個(gè)地方判斷AB test 邏輯，或者是更多的AB test同時(shí)進(jìn)行，這樣的頁(yè)面代碼邏輯復(fù)雜度相對(duì)比較高，也不夠整潔易懂，當(dāng)有新的AB test加入或者有AB test需要決策的時(shí)候，修改代碼的成本較高，降低了代碼維護(hù)的效率。

<template>
    ...
    <test-a v-if="testA" />
    <test-b v-else-if="testB" />
    ...
    <div v-if="testA">
        ...
    </div>
    <div v-else-if="testB">
        ...
    </div>
    ...
</template>
<script>
    ...
    if (testA) {
        ...   
    } else if (testB) {
        ...
    }
</script>

接下來(lái)就開(kāi)始我們今天文章的正題，看看有哪些方式可以解決以上的問(wèn)題。

組件級(jí)別

如只是簡(jiǎn)單的兩個(gè)小組件功能的灰度則可以直接用 v-if 處理

<testA v-if="testA" />
<testB v-else />

如有多個(gè)功能同時(shí)測(cè)試，可以通過(guò) Vue 的元素加一個(gè)特殊的 isattribute 來(lái)實(shí)現(xiàn)，currentTabComponent 可基于接口獲取或其他前端計(jì)算得出。

<component :is="currentTabComponent"></component>

頁(yè)面級(jí)別

方案一新增入口頁(yè)面分發(fā)

新增入口頁(yè)面，將新舊版本頁(yè)面升級(jí)為組件的方式引入，入口頁(yè)面增加接口查詢，通過(guò) v-if 或通過(guò) Vue 的<component> 元素加一個(gè)特殊的 is 屬性來(lái)加載頁(yè)面組件。如下是通過(guò)接口查詢代碼示例，通過(guò)接口前置查詢會(huì)帶來(lái)一定的界面延遲加載，取決于接口的響應(yīng)速度，我們也可以通過(guò)在URL增加參數(shù)獲取，這時(shí)的URL由后端拼接好參數(shù)再返回，這樣就可以避免一次接口查詢。

<template>
   <component :is="testId"></component>
</template>
<script>
  import IndexA from './index-a'
  import IndexB from './index-b'
  import {
    getTestID
  } from '@/api/getTestID'

  export default {
    name: 'index',
    components: {
      'index-a': IndexA,
      'index-b': IndexB
    },
    data() {
      return {
        testId: ''
      }
    },
    created() {
      this.getTestID()
    },
    methods: {
      async getTestID() {
        const { testId } = await getTestID({
          xxx: xxx
        })
        this.testId = testId
      }
    }
  }
</script>

這里直接這樣加載頁(yè)面級(jí)組件會(huì)導(dǎo)致此文件體積加大，可以將頁(yè)面組件的加載方式改為異步組件，提升頁(yè)面加載速度。

components: {
	'index-a': () => import(/* webpackChunkName: "index-a" */ './index-a'),
	'index-b': () => import(/* webpackChunkName: "index-b" */ './index-b')
}

方案二高階組件方案

在路由配置中從接口獲取灰度標(biāo)識(shí)數(shù)據(jù)，進(jìn)行路由分發(fā)。如果不想額外增加接口查詢的開(kāi)銷，也可以將標(biāo)識(shí)數(shù)據(jù)從URL參數(shù)返回，此方式需要提前拼接好參數(shù)。

高階組件的好處是所有需要灰度的加載邏輯都在路由配置文件中，統(tǒng)一維護(hù)，組件也可復(fù)用，不需要每個(gè)需要灰度的頁(yè)面都增加一個(gè)入口文件。

組件代碼

<template>
  <component :is="com" />
</template>
<script>
export default {
  name: 'DynamicLoadComponent',
  props: {
    renderComponent: {
      type: Promise
    }
  },
  data() {
    return {
      com: () => this.renderComponent
    }
  }
};
</script>

router.js 配置

{
  path: 'originPath',
  component: () => import('@/views/components/DynamicLoadComponent'),
  name: 'originPath',
  props: (route) => ({
    renderComponent: new Promise((resolve, reject) => {
      // 根據(jù) route 拼接參數(shù)獲取加載頁(yè)面
      if (route.query.testA) {
          resolve(import('@/views/testA'));
      } else {
          resolve(import('@/views/testB'));
      }
      // OR 根據(jù)接口返回標(biāo)識(shí)動(dòng)態(tài)加載頁(yè)面
      getAPIData()
        .then((response) => {
          if (response.testA) {
            resolve(import('@/views/testA'));
          } else {
            resolve(import('@/views/testB'));
          }
        })
        .catch(reject);
    }),
  })
}

方案三動(dòng)態(tài)Router.js引入

如果是有大面積的頁(yè)面替換，可采用這種方式。例如，后端開(kāi)發(fā)語(yǔ)言更換導(dǎo)致接口地址及返回的字段內(nèi)容都發(fā)生變化，這樣會(huì)有一段時(shí)間的過(guò)渡使用，開(kāi)發(fā)完一個(gè)頁(yè)面上線一個(gè)頁(yè)面，就可能會(huì)有5個(gè)頁(yè)面使用新的方案，5個(gè)頁(yè)面還是保留原始方案的情況。

改造router.js，將原始路由配置抽離到default.js中，再新建java.js將新方案路由配置寫入，基于前端計(jì)算或接口返回標(biāo)識(shí)動(dòng)態(tài)加載路由配置文件。

import Vue from 'vue'
import Router from 'vue-router'
import { isHitJavaAPI } from '@/config'

Vue.use(Router)

const router = new Router({
  mode: 'history'
})

const computedRouterDirectory = (routeFile) => {
   let routerConfig;
   const requireRouter = require.context('.', false, /\.js$/);
   routerConfig = requireRouter.keys().filter(file => file === `./${routeFile}.js`)[0];
   if (routerConfig) {
     routerConfig = requireRouter(routerConfig)
     routerConfig.default && router.addRoutes(routerConfig.default);
  }
}

if (isHitJavaAPI()) {
   computedRouterDirectory('java')
 } else {
   computedRouterDirectory('default')
}

isHitJavaAPI方法中是命中灰度的邏輯，如果這里是前端做灰度，可基于deviceID或UA等計(jì)算。如果這里是調(diào)用接口獲取方案則需改為同步調(diào)用。

總結(jié)

本文主要介紹了頁(yè)面級(jí)別的幾個(gè)灰度方案，每個(gè)方案的試用場(chǎng)景都有各自的優(yōu)缺點(diǎn)，如新增入口文件，主要是針對(duì)頁(yè)面變動(dòng)較大且當(dāng)前項(xiàng)目只會(huì)有一個(gè)在進(jìn)行中的灰度測(cè)試；高階組件適用于當(dāng)前項(xiàng)目有多個(gè)進(jìn)行中的灰度測(cè)試，則可復(fù)用組件；動(dòng)態(tài)加載路由配置文件主要針對(duì)于當(dāng)前項(xiàng)目有大規(guī)模的頁(yè)面UI或邏輯更換灰度測(cè)試；通過(guò)以上幾種方案都可極大的提升代碼的可維護(hù)性以及解耦灰度邏輯和業(yè)務(wù)代碼邏輯，當(dāng)灰度測(cè)試沒(méi)有問(wèn)題需全量上線時(shí)，我們只需修改入口邏輯即可，無(wú)需在業(yè)務(wù)代碼中去逐個(gè)修改灰度邏輯。

除開(kāi)本文所介紹的幾種方式，也還有其他的加載方式，如路由鉤子函數(shù)攔截后做動(dòng)態(tài)跳轉(zhuǎn)，或者請(qǐng)求到后端，后端做重定向處理等。每個(gè)方式都有各自的優(yōu)缺點(diǎn)，就看是不是你當(dāng)前場(chǎng)景最合適的方案。如果你有其他的方案，歡迎留言和我們交流～