Node Version > 15.x.x && npm Vesion > 8.x.x
项目整体管理依赖于 lerna，使用 lerna 命令去安装和启动项目
# 安装依赖
npm run install
# 启动
npm run start
# 打包
npm run build
# 安装
brew install redis
# 启动
brew services start/restart redis
| Package | Version |
|---|---|
| React | 17.x |
| Umi | ^3.5.35 |
| Umi | ^6.5.0 |
| Package | Version |
|---|---|
| Nestjs | 9.0.0 |
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
project: 'tsconfig.json',
tsconfigRootDir : __dirname,
sourceType: 'module',
},
plugins: ['@typescript-eslint/eslint-plugin'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
root: true,
env: {
node: true,
jest: true,
},
ignorePatterns: ['.eslintrc.js'],
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
};
目前应用存在这样一个特性，用户量大，但是用户获取的数据基本在同一时间是一致的，不会存在不同用户数据的不一致性。会导致 API 成本提升的原因会有两个。
- 用户大量请求重复数据
- 外部爬虫发送 API 请求导致
为了避免这种情况的发生，同时目前的接口数据存在一定的可重复利用性，所以从客户端接口访问的数据，都命中到服务端到缓存数据中。同时，服务端启用定时任务定时刷新缓存数据。
- 距离最新请求的一分钟内。避免网站无人使用时请求 API 导致无效刷新。
- 平均每 30s 请求刷新一次数据
- 如果需要动态的进行交互可以通过建立 webSocket 服务在数据更新是，更新到客户端
- 用户手动刷新发送 HTTP 请求刷新页面
- 客户端短轮询请求 API
懒加载的实现基于 InterSectionObserval,通过判断列表中的最后一个元素在视口出现加载更多列表
export class Observer {
_observer: IntersectionObserver | null = null;
init(nodes: Element | null, callback: Function) {
if (nodes) {
this._observer = new IntersectionObserver((changes) => {
//changes 是被观察的元素集合
for (let i = 0, len = changes.length; i < len; i++) {
let change = changes[i];
// 通过这个属性判断是否在视口中
if (change.isIntersecting) {
callback();
const target = change.target;
this._observer?.unobserve(target);
}
}
});
this._observer.observe(nodes);
}
}
unmounted() {
this._observer?.disconnect();
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent