湖中剑 前端周刊 #13 | Web录屏、Bundleless、

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

📰 News

Node v17.1.0 已发布

一次小更新，此次引入了对JSON断言的支持以及新的promise_hook模块（用于暴露V8 PromiseHook API给用户）。

https://nodejs.org/en/blog/release/v17.1.0/

📖 文章

浅析 Web 录屏技术方案与实现

随着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。

https://mp.weixin.qq.com/s/f55pB-MEO6VboFsihb-_gQ

助力双 11 个性化会场高效交付：Deco 智能代码技术揭秘

在这次双11的个性化会场我们大规模使用Deco进行研发，带来了48%左右的效率提升，本文将为大家揭秘Deco提效之秘。

image

https://mp.weixin.qq.com/s/oMMvLWz6u5aMSKCsCGg0Hg

记一次 Bundleless 迁移经历，重新认识 Vite 预构建

最近在公司探索落地 Bundless 构建工具，尝试将现有的一些业务项目 从 Webpack 往 Vite 迁移，由于中后台项目一般对浏览器兼容性要求不高，可以大胆引入一些前沿且激进的方案，因此在公司找到了一个业务中后台项目初步尝试引入 Vite。

https://mp.weixin.qq.com/s/pUzUr1lTfX3wkzJL_Xv1oQ

Js 异步处理演进，Callback=>Promise=>Observer

https://juejin.cn/post/7029093184332365855

TypeScript 4.5 — 浅谈模块能力增强

https://mp.weixin.qq.com/s/zZnXaBbsADoBNPCc4mD_HA

使用 React Query 优雅地统一请求的状态控制写法

https://swizec.com/blog/you-can-use-react-query-for-slow-computation-not-just-api/

两条命令让你的git自动变基

https://segmentfault.com/a/1190000040712052

Record, replay and measure user flows

Chrome 97 将提供 Recorder 功能，要尝鲜的可下载 Chrome Canary 版体验。Recorder 可实现用户操作的录制、重放和性能测量，有点像 Selenium 的改进版。此外还可把过程导出为 Puppeteer 脚本，想到的场景是 BUG 复现，预计各大厂内会有配套的平台产出或接入。

https://developer.chrome.com/docs/devtools/recorder/

Node.js 多进程/线程 —— 日志系统架构优化实践

https://mp.weixin.qq.com/s/s3DeAxrEbVmqtCHGP9lstg

🛠 工具、软件

react-animated-numbers

数字滚动效果，适用于数据展示场景。

demo: https://optimistic-noyce-cf2473.netlify.app/

https://www.npmjs.com/package/react-animated-numbers

React Native BLE PLX: 低功耗蓝牙

低功耗蓝牙技术广泛运用于可穿戴设备，react-native-ble-plx 是 React Native 上用于集成蓝牙的库。

https://github.com/dotintent/react-native-ble-plx

Bundle Scanner: 扫描网页npm依赖

输入 URL，他会告诉你这个站点用了哪些 npm 依赖。

原理是，虽然网站上用的 JavaScript 都是压缩后的，但有些东西在压缩前后是不变的，比如字面量和对象的 key，通过他们来对比即可实现。

https://bundlescanner.com/

---

周刊首发于GitHub，欢迎订阅：

我的周刊