带团队后的日常思考(十五)

一、日常问题

1)CDN 异常

5 月中旬,发现图像异常的上报量比平时多了 10 多倍,日常 300 多,现在 4000 多。

但是看不到异常的错误码,不能确定是域名问题还是服务问题。还特地查看了错误分布的时间段,但并没有看出说明规律。

本来以为是证书的问题,因为正好那几天证书到期了,但是证书更新后,异常量并没有降低。

为了缩小范围,特地去查看了几个上报量比较大的用户。

再反查 IP 区域,发现都是台湾那边的网络。

将这些信息整理后给到运维,让他去查,但效果并不理想,并没有查出问题,主要还是因为客户端并没有类似的上报。

所以我的问题没有被引起重视,但是在 5 月 24 号时,公司的一款 APP 也上报了相同的问题。

这次提工单给 CDN 厂商,将问题修复,三天后异常消失。

2)MongoDB 优化

公司之前在 MongoDB 中存储了大量日志类的数据,这些数据已经过时,现在是冗余数据。

于是用代码列出 5 张比较大的表,分别占用 207G、61G、9G、6G 和 5G。

其中最大那个表的数据已经同步给另一个数据分析组,所以里面的数据可以删除,我就只保留一个月的数据量。

从这张表中删除 834036294 条数据,持续时间 8 个多小时,减少 196G,并且做了一个定时任务,准点清理。

在释放另外 4 张冗余表之前,特地做了备份,执行释放命令后,也减少了 80G 容量。

MongoDB 从 287G 直接降低到了 11G,并且未来也会维持在这个数据量。运维说每个月至少能省个两三百的费用。

3)强缓存

强缓存是前端优化的常用手段,本次优化会对HTML、JavaScript 和 CSS 文件进行强缓存。

为了破坏 HTML 文件的强缓存,我用短链包住原始 URL 地址,在跳转时给 URL 自动带上一个时间戳参数。

复制代码
https://www.xxx.com/xxx.html?ts=1717469228483

如此操作后,我就能保证 HTML 文件是最新的,我的目的就是缓存另外两个文件,以完成加速。

这次配强缓存也比较谨慎,先在测试环境调试。但很奇怪,有些资源能进缓存,而有些却不行。

后面发现是与 CDN 有关,于是就先关闭了 CDN,直接走网关转发。

一开始就缓存 30 分钟,试验 1 天,然后再缓存 8 小时,试验一天。

最后将强缓存增加到 3 天,1 秒内白屏占比从 92.04% 提升至 95.32%,1 秒内首屏占比从 79.71% 提升至 88.03%

首屏的性能提升比较明显,就是将之前 2 秒内的那批用户提升到了 1 秒内。

二、工作优化

1)暗黑模式

最近在浏览抖音开源的组件库时,看到个暗黑模式,看设置比较简单,于是就想在自己的管理后台也实现一个。

我们的后台组件库用的是 Ant Design 4.X 版本,官方文档显示,也是支持暗黑模式的。

框架同样基于阿里出品的 Umi3,在定制主题一栏的文档中,正好有 Umi3 使用暗黑主题的配置。

官方提供了 3 种配置方式,第一种是在 .umirc.ts 或 config/config.ts 加一个参数。

复制代码
// .umirc.ts or config/config.ts
export default {
  antd: {
    dark: true, // 开启暗色主题
  },
},

第二种是在全局样式中增加暗黑模式的 antd.dark.lessantd.dark.css 文件。

复制代码
@import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件

第三种是在 webpack.config.js 中使用 less-loader,按需引入。

复制代码
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。
+         modifyVars: getThemeVariables({
+           dark: true, // 开启暗黑模式
+         }),
+         javascriptEnabled: true,
+       },
+     },
    }],
  }],
};

我想要的效果是可以开启和关闭暗黑模式,让用户有更大的选择权,采用了第二种方法。

但我是动态的引入 CSS 文件,当按钮开启时,才将 CSS 文件加载进来,关闭时再移除。

复制代码
{
 dark ? (
   <>
     <link rel="stylesheet" href="//www.xxx.com/css/antd.dark.css" />
    </>
  ) : null
}
<div className="layout" data-dark={dark}></div>

其中 dark 是一个内部状态,声明在函数组件的顶部。

复制代码
const [dark, setDark] = useState(false);

在某些元素中,还会自定义该属性值,为了在暗黑模式时重置背景或字体颜色等样式。

复制代码
.layout[data-dark=true] {
  .main {
    background-color: rgb(20, 20, 20);
  }
  .mainPer{
    background-color: rgb(20, 20, 20);
  }
  .content{
    background-color: rgb(20, 20, 20);
  }
}

在改变模式的时候,会同时将状态值缓存到 localStorage 中,用户再次进去就不用再选择了。

复制代码
localStorage.setItem('xxxx_dark', checked);

官方给的暗黑样式,也会有些遗漏之处,需要自己在文件中补充。

复制代码
.ant-legacy-form-item-label > label {
  color: #FFF
}
.has-error .ant-input, .has-error .ant-input:hover {
 background-color: transparent;
}

2)Ant Design Pro

最近公司有一个新的业务线,需要做一个单独的小程序,后台管理要求单独做一套。

一开始先去找那些有前后端的开源项目,公司服务端使用的是 Go,那就去找这个语言的开源项目。

找到的开源项目并不尽如意,可控性和便捷性并不能那么容易的平衡。

最后决定各自分别维护前端和后端,我们自己去找一套新的框架,他们自己设计后台基础接口。

我们最终选择了 Ant Design Pro,因为我们之前的框架基于 Umi3 + And4,所以换成 Pro 后,上手成本可以低很多。

对于我们来说,就是升级而不是替换,并且 Pro 的封装也比较完善,对于我们的日常开发绰绰有余,于是开始着手整理。

因为原始的框架并不能完全满足我们之前的需求,需要做些调整,期间还踩了不少坑。

例如 Umi Max 废弃了 document.mjs 模板文件、useRequest() 响应默认读取的是 JSON 结构的 data 字段。

框架默认并不提供可视化的权限管理,需要我自己设计,那正好用来熟悉这个框架。

总之,前前后后花了一周时间才初步整理完成。

接口规范这次也做了完善,例如所有的接口除了登录之外,都需要有身份凭证。

复制代码
Authorization: Bearer XXXXX

由于是我们先行,自己还定义好了相关的接口文档以供服务端参考,格式如下面的登录接口。

复制代码
// 请求
{
  username: '',
  password: ''
}
// 响应
{
  code: 0,
  data: {
    token: 'Bear UUUU',
    access: 'admin'
  },
  msg: '登录正常'
}

接口的 JSON 字段(如下所示),这次也一定要明确好,不能出现多种格式。权限的设计规则,也要与后端约定好。

复制代码
{
  code: 0,
  msg: '查询列表正常',
  data: [],    //或{}
}

若是列表接口,在请求参数中需加上当前页码和每页数量,在响应中需加上另外 3 个字段。

复制代码
// 请求
{
  pageSize: 10, // 每页显示
  current: 1,   // 当前页码
}
// 响应
{
  total: 100,
  pageSize: 20,
  current: 1,
}

Pro 全程使用 TypeScript 语法,一开始写起来还会有点不习惯,需要慢慢适应。

使用新框架不仅仅是解决业务,也是一个学习的过程,学习设计思想、学习技术细节、学习各种规范。

虽然上手有成本,但最终来看利大于弊。