小编点评

正文

一、日常问题

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.less 或 antd.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 语法，一开始写起来还会有点不习惯，需要慢慢适应。

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

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