前端构建系统的自动化测试
在较大的前端项目里，往往不会直接使用像是 Webpack 这类的打包工具，而是对它们做进一步封装，比如通过调用其提供的 Node API 编写符合自身项目工作流程的构建脚本，以实现对构建流程的更多干预。
而这些构建脚本同样需要为其添加自动化测试，以保证最终被用于生产环境的代码的“构建一致性”。测试的目的就是保证构建脚本与它的依赖项行为的一致。
#experience
在较大的前端项目里，往往不会直接使用像是 Webpack 这类的打包工具，而是对它们做进一步封装，比如通过调用其提供的 Node API 编写符合自身项目工作流程的构建脚本，以实现对构建流程的更多干预。
而这些构建脚本同样需要为其添加自动化测试，以保证最终被用于生产环境的代码的“构建一致性”。测试的目的就是保证构建脚本与它的依赖项行为的一致。
#experience
三种 Polyfill 构建文件大小比较
直接 import
@babel/polyfill (corejs2, deprecated): 87.5 KiB
core-js/stable (corejs3): 153 KiB
core-js/stable & regenerator-runtime/runtime (corejs3 & async function): 160 KiB
preset-env with useBuiltIns: 'usage'
core-js@3: 19.4 KiB
core-js@3 & regenerator-runtime: 48.1 KiB
plugin-transform-runtime
corejs3: 19.3 KiB
corejs3 & regenerator: 52.8 KiB
直接 import
@babel/polyfill (corejs2, deprecated): 87.5 KiB
core-js/stable (corejs3): 153 KiB
core-js/stable & regenerator-runtime/runtime (corejs3 & async function): 160 KiB
preset-env with useBuiltIns: 'usage'
core-js@3: 19.4 KiB
core-js@3 & regenerator-runtime: 48.1 KiB
plugin-transform-runtime
corejs3: 19.3 KiB
corejs3 & regenerator: 52.8 KiB
笨蛋 Bot (@bendan_bot)
写了个 Bot，支持 Serverless 部署到 Vercel，也可以部署到服务器，后面会添加其它功能。https://github.com/sxyazi/bendan
补充：如果需要 /pin 功能，可以注册个免费的 MongoDB Atlas。
写了个 Bot，支持 Serverless 部署到 Vercel，也可以部署到服务器，后面会添加其它功能。https://github.com/sxyazi/bendan
补充：如果需要 /pin 功能，可以注册个免费的 MongoDB Atlas。
GitHub
GitHub - sxyazi/bendan: Bendan Bot
Bendan Bot. Contribute to sxyazi/bendan development by creating an account on GitHub.
👍4
在 Record & Tuple 中存储 Object
Record/Tuple 可能会在不久后作为新的 primitive type 出现在 Node.js 中，它们与 Object/Array 相似，但它们是 immutable 的。
这意味着在 Record/Tuple 中不能包含 Object 或是 Array，但这种要求时常存在。一种解决方案是，将需要存储的对象放到一个 WeakMap 中，并以 Symbol 作为 key，而在 Record/Tuple 中仅保留这个 key。
值得注意的是，目前 WeakMap 并不支持以 Symbol 为 key，因此需要使用 Map 替代。
#learning
Record/Tuple 可能会在不久后作为新的 primitive type 出现在 Node.js 中，它们与 Object/Array 相似，但它们是 immutable 的。
这意味着在 Record/Tuple 中不能包含 Object 或是 Array，但这种要求时常存在。一种解决方案是，将需要存储的对象放到一个 WeakMap 中，并以 Symbol 作为 key，而在 Record/Tuple 中仅保留这个 key。
值得注意的是，目前 WeakMap 并不支持以 Symbol 为 key，因此需要使用 Map 替代。
#learning
这两天在学习 Web 性能优化，收集了一些评估页面性能（或辅助优化）的工具。
在线工具
WebPageTest
PageSpeed Insights
Search Console
GTmetrix
浏览器工具
Lighthouse
speedline
DevTools performance tab
库
web-vitals
lazysizes
react-window
Guess.js
CI
bundlesize
lighthouse-ci
critical
critters
#learning
在线工具
WebPageTest
PageSpeed Insights
Search Console
GTmetrix
浏览器工具
Lighthouse
speedline
DevTools performance tab
库
web-vitals
lazysizes
react-window
Guess.js
CI
bundlesize
lighthouse-ci
critical
critters
#learning
两种异步 CSS 加载方案的细微区别
为了避免 DOM 构建被 non-critical CSS 的加载阻塞，有两种常见的异步加载方案。其一（preload）：
其二（media query）：
media query 方案，除了有更好的浏览器兼容性，在加载时机上也和 preload 有细微的区别：
被标记为 preload 的资源，拥有最高的加载优先级，因此很可能导致其它重要资源的下载时机被剥夺，这可能也并非是 non-critical CSS 所需要的。
#learning
为了避免 DOM 构建被 non-critical CSS 的加载阻塞，有两种常见的异步加载方案。其一（preload）：
<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">其二（media query）：
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">media query 方案，除了有更好的浏览器兼容性，在加载时机上也和 preload 有细微的区别：
被标记为 preload 的资源，拥有最高的加载优先级，因此很可能导致其它重要资源的下载时机被剥夺，这可能也并非是 non-critical CSS 所需要的。
#learning