AuthingGuard是一种可嵌入的登录表单，可根据你的需求进行配置，它使你可以轻松添加各种社会化登录方式，以便你的用户可以无缝登录，并且在不同平台拥有一致的登录体验。
Authing 2.0 版本上线之后，我们对官方托管的登录页面进行了 UI 和功能升级，升级后的登录界面操作方便快捷。在新版本升级的同时，我们对原有 Guard 组件进行了兼容处理保证了原有 Guard 组件的兼容性。同时，我们发现原有 Guard 也存在以下一些问题：
-
登录流程 UI 和行为与新版官方登录页面不一致。
-
只提供命令式调用方法，没有提供对应前端主流框架的组件，开发者使用体验不好。
-
打包体积较大，原版 Guard 打包出来有 1.3M。
-
原版 Guard 还带有路由跳转逻辑，嵌入在单页面应用中使用时比较麻烦。
-
公有云应用不支持 SSO
基于上面碰到的一些问题，我们决定对 Guard 进行重构，并确定了以下目标：
-
新版 Guard 组件需要和线上登录流程的组件 UI 和行为保持一致。
-
新版 Guard 组件应该实现对React、Vue和Angular更好的适配，并同时支持命令式调用。
-
降低打包产物体积，目标产物低于 300KB。
-
去除路由跳转逻辑，完全由数据驱动进行 UI 切换。
-
公有云应用也要支持SSO
方案选择
在确定了目标后，我们提出了以下几个方案：
- 方案一：使用Stencil.js打包出能在主流框架中直接使用的 web component
优点：Augular、Vue、React 组件复用最大化。为了兼容前端框架的代码几乎为零。
缺点：Stencil.js 学习成本高，有一定的不确定性，如在 Vue 框架下是否兼容复杂配置和多种回调事件。
- 方案二：Augular、Vue、React 三个平台相对符合各个平台最佳实践开发，在样式上做复用，
优点：开发者体验最佳，和各个前端框架贴近程度高。
缺点：基本无法复用逻辑。
- 方案三：先写一版 React 的组件，针对其他框架进行包装
优点：Augular、Vue、React 三个平台兼容，支持原生 JavaScript 命令式调用，UI 和绝大部分业务逻辑可直接用现有线上方案。
缺点：对于非 React 版的组件，还是需要将 React 打包进组件内，包的体积会增大。
为了确保能够快速稳定上线且做到最大程度的逻辑复用，最后选定了方案三，先完成 React 版的组件，然后使用原生 JavaScript 进行包装，完成原生 JavaScript 版的组件，最后 Vue 和 Angular 分别将原生 js 版本包装成组件即可。
具体实现
实现过程中碰到的问题主要是项目如何组织、打包流程和产物体积等问题，业务逻辑因为之前都有就没有太大问题。
工程化
要为不同的框架生成对应组件，就需要打包出不同的 npm 包，且 native-js 版的组件依赖 React 版组件，其他版本组件依赖 native-js 版本的组件，所以决定把所有包都放在一个仓库中进行管理，采用lerna + yarn workspace来管理工作流。通过 lerna add pack1 --scope=pack2 就能实现本地包之间的相互依赖，通过 lerna run xx --stream，lerna 会按依赖拓扑顺序依次执行各个包中的命令，这个在打包时是必须的。同时 lerna version 能够统一管理包的版本，若某一个包的版本通过此命令改变了，依赖此包的其他包中的 package.json 中的版本号也会对应修改。最后的项目结构如下：
打包配置
React 和 native-js 版的组件是使用 React 官方提供的工具create-react-app初始化的，但是不支持将某一组件打包成组件库的形式，需要进行一些改造。Vue 和 Angular 官方提供的脚手架工具都提供了打包成组件库的功能，但是中间也碰到了一些问题。
React
create-react-app修改配置，需要运行 yarn run eject， CRA 会将所有的打包配置都暴露到项目根目录的 config 文件夹中，然后就能进行修改了。以下是我修改的一些 webpack 配置：
-
entry: 设置为组件库入口文件
-
output.library：设置成组件库名。
-
output.libraryTarget： 为了兼容所有调用方式(cdn 引入，cmd，amd，esmodule)，需要设置为 umd。
-
externals： 作为 React 组件，使用方是肯定会依赖 react 和 react-dom 的，将这两个包加入到 externals 中，webpack 就不会将其打包到最后产物中，同时在 package.json 中把它们加入到 peerDependencies 和 devDependencies 中。
-
optimization.splitChunks：组件库是希望每一个入口文件只输出一个打包文件的，将 optimization.splitChunks设置为
cacheGroups: {
default: false,
},
webpack 就不会进行分包优化了。
- optimization.runtimeChunk: runtimeChunk 是 webpack 为了充分利用浏览器缓存，将一些包的映射关系单独提取出来的记录文件，作为组件库也不需要，将其设置为 false。
native-js
native-js 版的配置与 React 版的差不多，只是需要将 externals 配置去掉，因为 native-js 版的使用方一般是不会依赖 react 和 react-dom 的。
Vue
Vue 官方提供的构建工具vue-cli提供了构建组件库的功能，但是打包出来后发现文件莫名大了300kb 左右，查看配置也没有发现什么问题，最后决定使用rollup进行打包，rollup 的配置确实比较简单，配置好相关的 vue、css、babel 插件就差不多了。不过 rollup 对于 commonjs 的包识别可能会有问题，使用了 rollup-plugin-commonjs插件也可能无法识别包内导出的内容，需要手动配置一下插件的 namedExports 配置。
Angular
Angular 提供的cli已经比较完善了，打包出来的库也没有出现莫名体积增大的情况，只是需要将 native-js 加入库根目录下的 ng-package.json 的 whitelistedNonPeerDependencies 中，不然打包时不会将其打包到最后产物中。
经过上面的一些配置，四个版本的项目都能运行起来且能够相互依赖了，只需要将所有的业务逻辑都放到 React 包中，其他版本的包做一些事件监听和配置传入即可。
体积优化
为了 UI 一致及快速开发，我们使用了ant来开发 React 版的组件，最后打包出来发现有 1.1M，显然没有达到最初定的目标，通过 webpack-bundle-analyzer 对打包产物进行分析，做了一些优化。
tree-shaking
Guard 组件中的登录逻辑都使用了我们的authing-js-sdk，有些代码在 Guard 中并没有使用到也被打包进来了，而 authing-js-sdk 是有打包出 esmodule 模式的包的，所以应该支持 tree-shaking 的，看了代码发现是没有在 package.json 中配置 sideEffects，加上之后就支持 tree-shaking 了，不需要的代码也没有被打包进来。
node-polyfill
Webpack 在打包时，如果发现有些包依赖了一些 node 环境下的包，会自动加上 pollyfill，而这些在前端是用不到的，而 authing-js-sdk 是同时兼容 web 和 node 环境的，也会依赖一些 node 相关的包，所以在 webpack 的 node 配置选项中将这些包设置为 false 也能减小一些体积。
antd
antd 中的组件功能都是非常全的，所以体积也会稍微大一些，最好的办法是完全不依赖 antd，但是为了快速上线，我们先替换了一些比较容易替换的组件，就减少了一些用不到的功能的代码。
通过以上的一些优化，最后包大小分布图如下：
发现 antd 的依赖还是占了很大部分，React 版大小在 512KB 左右，其他版本的也都在 700KB 左右，所以如果将 antd 完全去除，还是能减小不少体积的。本次虽然没有一步到位，但也能使用了。
未来规划
Guard 是一个能够让开发者非常快速地接入登录界面的组件，后续我们会持续不断的进行迭代优化，也会在组件库中加入更多的组件，目前有以下一些规划：
可视化配置
后面我们会提供可视化配置功能，通过一些简单的可视化操作就能改变表单的外观、登录方式等配置。
继续体积优化
通过移除 antd 依赖，持续优化体积。
个人中心组件
增加个人中心组件，使开发者可以简单快速地展示用户个人信息。