每次请求从原来调用接口改为调collector方法，该方法返回promise，将promise的resolve注册到事件中。在时间窗口内的所有请求的参数会被收集。 在截流函数中发起真正的请求，请求结束后消费掉事件，也会触发promise的resolve。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 import { throttle } from 'lodash'; export default class PatchMatch { private constructor() { this.bus = new EventBus(); } public collector = (id, param) => { this. ...
背景 # 这个项目有点老旧 "dva": "2.1.0", "react": "^16.2.0", 我打算用最新的 react 和 @reduxjs/toolkit 开始重构，旧的依赖只能使用 connect 方式来获取 store ，使用 useSelector 和 useDispatch 很方便也很易读。@reduxjs/toolkit提供的immer和actionCreater也很好用。 新版本的 react-redux 才提供了 useSelector 和 useDispatch ，但是新版本会导致 dva 出错。无奈放弃了新版本，还是用旧版本的 connect 。还好这不影响对代码进行组件化。 首先重构的是一个643行的组件，它的render方法有580行。 重复代码 # 很容易的发现了一大段重复代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div className={styles.numbers_wrapper}> <span className={styles.number_item}> <span className={styles.number}>{detail.properties.member_count}</span> <span className={styles.text}>班级总人数</span> </span> <span className={styles.number_item}> <span className={styles. ...
现象 # epp项目在pad端加载需要10-30s时间。 为什么会这样？ # pad端是RN项目，前面2个界面的操作之后开启webview访问学生端网址，加载epp项目。 观察epp学生端项目的加载： ![优化前][优化-前.jpg] 这个是渲染第一帧前加载资源的截图，可以看到有17个js文件，而很明显的，fabric、ckeditor、aliplayer这些体积很大的库在学生端是不需要的（这3个文件都是编辑器用的，epp项目分学生端、教师端、编辑器），而且资源数量较多。 两个原因导致了pad端需要加载10s的问题：资源数量多、很多不需要的代码被加载。 30s的情况出现在网络差的时候，比如上课时，有30个学生同时使用pad，瓜分宽带导致资源下载速度更慢。这个后面也有方案尝试解决。 问题处在哪？ # 从代码的入口文件看起，发现了这段代码： ![懒加载][优化-代码.png] 这段代码的作用是根据url来加载不同的场景（学生端、教师端、编辑器），重点是下面这段代码。 1 2 3 const importScene = () => import(`@/scene/${sceneName}Scene/${sceneName}Scene`) .then(module => module.default); 使用webpack的代码分割、懒加载机制。webpack会将import("./module")作为分割点，将其放在单独的chunk文件中，实现懒加载。 import()也可以接受动态表达式，比如这样import(./routes/${path}/route)，此时import() 为每一个可能的模块创建独立的chunk，这句话的重点是可能的模块，也就是上面代码的问题所在。 对于前面那段代码，import的动态的部分就是sceneName，对于webpack来说它是一个未知变量，所以webpack认为它是可能的模块。 在我们的业务中，可能的模块包含来学生端、教室端、编辑器，那么webpack会将3个大模块全部分别打包，而且将其全部下载。从而导致来前面提到的2个问题。 解决问题 # 尝试着把上面提到的那段动态表达式改成确定的语句，比如： 1 2 3 4 5 6 7 8 const importStudentScene = () => import('@/scene/studentScene/studentScene') .then(module => module.default); const app = edApplication.getInstance('edinnova'); importStudentScene().then(studentScene => { app.addScene(new studentScene()); app.startScene('studentScene', '#app'); }); 再次开启项目： ![优化后][优化-后.jpg] 可以看到数量和体积都小了很多。 ![优化后][优化-后2.jpg] ...