Published on

2023-第十六周

Authors

该周报主要为各个地方内容的汇总整理

技术

glyphhanger

Glyphhanger 是一款网络字体工具，可以通过字符子集和白名单来优化字体文件大小。
作者将 Roboto 字体缩小到 ASCII 字符集和其他白名单字符，成功将字体文件大小缩小了一半以上，且不会影响字符支持。
使用此工具和技巧可显著降低网站使用自定义字体时的页面重量。
作者尝试了可变字体，但发现文件大小太大。他们使用了 Glyphhanger 工具，将字体缩小为仅包括必要字符，并使用--whitelist 参数包括了自定义字符。Glyphhanger 还可以根据页面使用的字符来评估和子集化字体。作者成功地将使用优化字体的网站组件的文件大小大大缩小。他推荐使用该工具来优化字体文件。

聊聊 WebCodecs 实现 GIF 视频转码

本文介绍了如何将 GIF 转换成视频资源，困难在于如何在 Web 环境下转换。文章讨论了两种方案：

  1. 通过 Canvas 实现动画绘制
  2. 使用 FFmpeg 实现转码。文章详细介绍了如何使用 ffmpeg.wasm 在浏览器环境下实现转码，这是一个便捷的 FFmpeg WebAssembly 实现。

moduleResolution 总结

JS 在设计之初并没有模块这个概念，ESM 也才这两年正式落地，而模块解析策略随着exports 的出现有了统一的并且能够满足各种场景需求的标准。估计过个一两年很多新发布的 npm 包连main 字段都不写了。

  • exports 是一个强大并且被各种前端工具广泛支持的模块解析标准，我们开发 npm 包时，应该使用 exports来管理它的解析规则
  • exports 的解析规则较为复杂，社区的很多第三方实现或多或少有些 bug，尤其是和优先级相关的
  • 对于很多不想写扩展名的 typescript 项目来说，应该使用 bundler 解析策略，这样的话第三方库就可以只写 exports，不写 typesVersions
  • typescript 的很多设计都是对现实妥协的产物，除了 bundler 解析策略，再例如装饰器，早期的装饰器并没有进到 ECMAScript stage3 标准，TS 还是自己实现了一套。换句话说就是 typescript 在开发效率和 ECMAScript 标准之间在当时选择了开发效率。

What's new in ECMAScript 2023

即将发布的 ECMAScript 规范预计将在 6 月底发布，其中包括一系列新功能，如“从后找数组”、“Hashbang Grammar”、“Symbols 作为 WeakMap 键”以及“复制数组来修改”。

  • 数组从最后查找提案在 Array 和 TypedArray 原型上添加了 findLast() 和 findLastIndex() 方法，允许从最后一个元素进行搜索。
  • Hashbang Grammar 提案规范了可执行脚本开头的 hashbang 的使用
  • Symbols 作为 WeakMap 键提案允许在 WeakMap 中使用未注册的 Symbols 作为键。复
  • 制数组来修改的提案添加了一些方法，这些方法返回一个新副本，而不是在原数组上进行原地变异。

Web 播放 RTSP 推流最佳方案实践

本文介绍了 Web 端播放 RTSP 流的两种解决方案。

  • 首先，讲解了将 RTSP 流转换为 WebSocket/WebRTC 再转换为 WebVideo 的原理。
  • 然后，介绍了基于 ffmpeg 的 Node 后端推流方案和基于 jsmpeg/flv.js 的前端视频展示方案，以及基于 WebRTC 的推流方案，并提供了详细的代码示例和解释。
  • 最后，总结了付费方案和免费方案的区别，推荐程序员使用免费方案搭建转流服务。

Display Warning for Unsaved Form Data on Page Exit

本文介绍了如何实现一个 FormPrompt 组件，以提高 Web 应用程序的用户体验。该组件可以在用户尝试离开具有未保存更改的页面时发出警告。作者讨论了使用纯 JavaScript 的 beforeunload 事件处理此类情况，以及使用 React Router v5 中的 Prompt 组件和 React Router v6 中的 useBeforeUnload 和 unstable_useBlocker 钩子的 React 特定解决方案。

工具

Markflow

革新你的工作流程，创造更多、更快的作品。
告别开发工具，复制任何元素并将其直接粘贴到项目中。Markflow 支持 Figma、React、Webflow、Svelte 等。

pretty-ts-errors

让 VSCode 中 TypeScript 的错误信息更加美观易懂

lazyrepo

lazyrepo 是一个针对 npm/pnpm/yarn monorepos 的零配置缓存任务运行器。它适合于 turborepo 所开创的领域：使 package.json“scripts”扩展，而无需采用像 nx、bazel、rush 或 buck 这样的大型工业级构建系统。lazyrepo 非常快速，尽管它是用 TypeScript 编写而不是一些年轻、英俊、聪明、有趣的系统语言，但它比 turborepo 要快得多。

更新

Vite 4.3

  • Vite 4.3 已发布，着眼于提高开发服务器性能。与 Vite 4.2 相比，在各种基准测试中，该更新产生了显著的速度提升。
  • Vite 团队正在致力于进一步的性能改进，并为 Vite 开发了官方基准测试工具，在 vite-plugin-inspect 中增加了更多与性能相关的功能。
  • Vite 团队计划在今年发布一次重大更新，与 9 月份的 Node.js 16 的 EOL（结束生命周期）相一致，该版本将停止支持 Node.js 14 和 16。

vercel-web-analytics

对标 Google Analytics

Discuss on Twitter • View on GitHub