• Authing Guard 是一種可嵌入的登錄表單，可根據(jù)你的需求進行配置，它使你可以輕松添加各種社會化登錄方式，以便你的用戶可以無縫登錄，并且在不同平臺擁有一致的登錄體驗。

Authing 2.0 版本上線之后，我們對官方托管的登錄頁面進行了 UI 和功能升級，升級后的登錄界面操作方便快捷。在新版本升級的同時，我們對原有 Guard 組件進行了兼容處理保證了原有 Guard 組件的兼容性。同時，我們發(fā)現(xiàn)原有 Guard 也存在以下一些問題：

• 登錄流程 UI 和行為與新版官方登錄頁面不一致。
• 只提供命令式調(diào)用方法，沒有提供對應(yīng)前端主流框架的組件，開發(fā)者使用體驗不好。
• 打包體積較大，原版 Guard 打包出來有 1.3M。
• 原版 Guard 還帶有路由跳轉(zhuǎn)邏輯，嵌入在單頁面應(yīng)用中使用時比較麻煩。
• 公有云應(yīng)用不支持 SSO

基于上面碰到的一些問題，我們決定對 Guard 進行重構(gòu)，并確定了以下目標：

1. 新版 Guard 組件需要和線上登錄流程的組件 UI 和行為保持一致。
2. 新版 Guard 組件應(yīng)該實現(xiàn)對 React、Vue 和 Angular 更好的適配，并同時支持命令式調(diào)用。
3. 降低打包產(chǎn)物體積，目標產(chǎn)物低于 300KB。
4. 去除路由跳轉(zhuǎn)邏輯，完全由數(shù)據(jù)驅(qū)動進行 UI 切換。
5. 公有云應(yīng)用也要支持 SSO

方案選擇

在確定了目標后，我們提出了以下幾個方案：

• 方案一：使用 Stencil.js 打包出能在主流框架中直接使用的 web component

優(yōu)點：Augular、Vue、React 組件復(fù)用最大化。為了兼容前端框架的代碼幾乎為零。

缺點：Stencil.js 學(xué)習(xí)成本高，有一定的不確定性，如在 Vue 框架下是否兼容復(fù)雜配置和多種回調(diào)事件。

• 方案二：Augular、Vue、React 三個平臺相對符合各個平臺最佳實踐開發(fā)，在樣式上做復(fù)用，

優(yōu)點：開發(fā)者體驗最佳，和各個前端框架貼近程度高。

缺點：基本無法復(fù)用邏輯。

• 方案三：先寫一版 React 的組件，針對其他框架進行包裝

優(yōu)點：Augular、Vue、React 三個平臺兼容，支持原生 JavaScript 命令式調(diào)用，UI 和絕大部分業(yè)務(wù)邏輯可直接用現(xiàn)有線上方案。

缺點：對于非 React 版的組件，還是需要將 React 打包進組件內(nèi)，包的體積會增大。

為了確保能夠快速穩(wěn)定上線且做到最大程度的邏輯復(fù)用，最后選定了方案三，先完成 React 版的組件，然后使用原生 JavaScript 進行包裝，完成原生 JavaScript 版的組件，最后 Vue 和 Angular 分別將原生 js 版本包裝成組件即可。

具體實現(xiàn)

實現(xiàn)過程中碰到的問題主要是項目如何組織、打包流程和產(chǎn)物體積等問題，業(yè)務(wù)邏輯因為之前都有就沒有太大問題。

工程化

要為不同的框架生成對應(yīng)組件，就需要打包出不同的 npm 包，且 native-js 版的組件依賴 React 版組件，其他版本組件依賴 native-js 版本的組件，所以決定把所有包都放在一個倉庫中進行管理，采用 lerna + yarn workspace 來管理工作流。通過 ?lerna add pack1 --scope=pack2? 就能實現(xiàn)本地包之間的相互依賴，通過 ?lerna run xx --stream?，lerna 會按依賴拓撲順序依次執(zhí)行各個包中的命令，這個在打包時是必須的。同時 ?lerna version? 能夠統(tǒng)一管理包的版本，若某一個包的版本通過此命令改變了，依賴此包的其他包中的 package.json 中的版本號也會對應(yīng)修改。最后的項目結(jié)構(gòu)如下：

打包配置

React 和 native-js 版的組件是使用 React 官方提供的工具 create-react-app 初始化的，但是不支持將某一組件打包成組件庫的形式，需要進行一些改造。Vue 和 Angular 官方提供的腳手架工具都提供了打包成組件庫的功能，但是中間也碰到了一些問題。

React

create-react-app 修改配置，需要運行 ?yarn run eject?， CRA 會將所有的打包配置都暴露到項目根目錄的 config 文件夾中，然后就能進行修改了。以下是我修改的一些 webpack 配置：

• ?entry?: 設(shè)置為組件庫入口文件
• ?output.library?：設(shè)置成組件庫名。
• ?output.libraryTarget?： 為了兼容所有調(diào)用方式(cdn 引入，cmd，amd，esmodule)，需要設(shè)置為 ?umd?。
• ?externals?： 作為 React 組件，使用方是肯定會依賴 ?react? 和 ?react-dom? 的，將這兩個包加入到 ?externals? 中，webpack 就不會將其打包到最后產(chǎn)物中，同時在 ?package.json? 中把它們加入到 ?peerDependencies? 和 ?devDependencies? 中。
• ?optimization.splitChunks?：組件庫是希望每一個入口文件只輸出一個打包文件的，將 ?optimization.splitChunks?設(shè)置為

cacheGroups: {default: false,},

?webpack? 就不會進行分包優(yōu)化了。

• ?optimization.runtimeChunk?: ?runtimeChunk? 是 webpack 為了充分利用瀏覽器緩存，將一些包的映射關(guān)系單獨提取出來的記錄文件，作為組件庫也不需要，將其設(shè)置為 ?false?。

native-js

native-js 版的配置與 React 版的差不多，只是需要將 ?externals? 配置去掉，因為 native-js 版的使用方一般是不會依賴 react 和 react-dom 的。

Vue

Vue 官方提供的構(gòu)建工具 vue-cli 提供了構(gòu)建組件庫的功能，但是打包出來后發(fā)現(xiàn)文件莫名大了300kb 左右，查看配置也沒有發(fā)現(xiàn)什么問題，最后決定使用 rollup 進行打包，rollup 的配置確實比較簡單，配置好相關(guān)的 vue、css、babel 插件就差不多了。不過 rollup 對于 ?commonjs? 的包識別可能會有問題，使用了 ?rollup-plugin-commonjs?插件也可能無法識別包內(nèi)導(dǎo)出的內(nèi)容，需要手動配置一下插件的 ?namedExports? 配置。

Angular

Angular 提供的 cli 已經(jīng)比較完善了，打包出來的庫也沒有出現(xiàn)莫名體積增大的情況，只是需要將 native-js 加入庫根目錄下的 ng-package.json 的 ?whitelistedNonPeerDependencies? 中，不然打包時不會將其打包到最后產(chǎn)物中。

經(jīng)過上面的一些配置，四個版本的項目都能運行起來且能夠相互依賴了，只需要將所有的業(yè)務(wù)邏輯都放到 React 包中，其他版本的包做一些事件監(jiān)聽和配置傳入即可。

體積優(yōu)化

為了 UI 一致及快速開發(fā)，我們使用了 ant 來開發(fā) React 版的組件，最后打包出來發(fā)現(xiàn)有 1.1M，顯然沒有達到最初定的目標，通過 ?webpack-bundle-analyzer? 對打包產(chǎn)物進行分析，做了一些優(yōu)化。

tree-shaking

Guard 組件中的登錄邏輯都使用了我們的 authing-js-sdk，有些代碼在 Guard 中并沒有使用到也被打包進來了，而 authing-js-sdk 是有打包出 esmodule 模式的包的，所以應(yīng)該支持 tree-shaking 的，看了代碼發(fā)現(xiàn)是沒有在 package.json 中配置 ?sideEffects?，加上之后就支持 tree-shaking 了，不需要的代碼也沒有被打包進來。

node-polyfill

Webpack 在打包時，如果發(fā)現(xiàn)有些包依賴了一些 node 環(huán)境下的包，會自動加上 pollyfill，而這些在前端是用不到的，而 authing-js-sdk 是同時兼容 web 和 node 環(huán)境的，也會依賴一些 node 相關(guān)的包，所以在 webpack 的 ?node? 配置選項中將這些包設(shè)置為 ?false? 也能減小一些體積。

antd

antd 中的組件功能都是非常全的，所以體積也會稍微大一些，最好的辦法是完全不依賴 antd，但是為了快速上線，我們先替換了一些比較容易替換的組件，就減少了一些用不到的功能的代碼。

通過以上的一些優(yōu)化，最后包大小分布圖如下：

?發(fā)現(xiàn) antd 的依賴還是占了很大部分，React 版大小在 512KB 左右，其他版本的也都在 700KB 左右，所以如果將 antd 完全去除，還是能減小不少體積的。本次雖然沒有一步到位，但也能使用了。

未來規(guī)劃

Guard 是一個能夠讓開發(fā)者非?？焖俚亟尤氲卿浗缑娴慕M件，后續(xù)我們會持續(xù)不斷的進行迭代優(yōu)化，也會在組件庫中加入更多的組件，目前有以下一些規(guī)劃：

可視化配置

后面我們會提供可視化配置功能，通過一些簡單的可視化操作就能改變表單的外觀、登錄方式等配置。

?繼續(xù)體積優(yōu)化

通過移除 antd 依賴，持續(xù)優(yōu)化體積。

個人中心組件

增加個人中心組件，使開發(fā)者可以簡單快速地展示用戶個人信息。

獲取更多內(nèi)容，歡迎訪問 Authing 博客。

總結(jié)

以上是生活随笔為你收集整理的vue 拓扑组件_Authing 登录组件优化实践解析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。