MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3

⬆️ 发布
📝 文章
🪓 代码
🎁 代码之外
🕒 订阅

这是「MDH：前端周刊」第 0004 期，发表于：2021/05/31。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图1

⬆️ 发布

1. Chrome 91

https://developer.chrome.com/blog/new-in-chrome-91/
https://blog.chromium.org/2021/04/chrome-91-handwriting-recognition-webxr.html
https://v8.dev/blog/v8-release-91
https://v8.dev/features/simd
https://web.dev/webtransport/
https://mp.weixin.qq.com/s/iyx7-yfTTc_sPvMdWxr1dg

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图2

改动，

升级 V8 到 9.1，默认开启 Top-level await
默认开启 WebAssembly SIMD
支持 WebTransport，WebSockets 之外的又一种双向通讯方式，UDP-like datagrams，可取消
WebSockets 支持 HTTP/2，可以和其他请求复用一个 TCP 连接，不用单独建一个，从而提升速度
ServiceWorker 支持 ES Modules
File System Access API 更新，showSaveFilePicker 支持 suggestedName，showOpenFilePicker 支持 startIn
Clipboard 接口支持读文件，通过 paste 事件加 e.clipboardData.files 获取
新增 GravitySensor 接口，用于手机游戏研发
禁用端口 10080
支持关联站点共享凭据，通过在 /.well-known/assetlinks.json 声明实现

2. Jest 27 发布: New Defaults for Jest, 2021 edition ⏩

https://jestjs.io/blog/2021/05/25/jest-27

改动，

交互模式支持 step through 失败用例
Snapshots 支持没有 prettier 时用 Inline 模式
native ESM 支持牵涉面太广，做了一部分，custom runner、reporters、watch plugins 等也将支持 esm
支持 link 过来的 test 文件
transform 支持异步，可以更好地支持 esbuild、snowpack 和 vite 等
默认测试环境从 jsdom 改为 node，因为 jsdom 性能差，而很多人测 node 也用了他

3. TypeScript 4.3

https://devblogs.microsoft.com/typescript/announcing-typescript-4-3/

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图3

get/set 支持不同类型
Smarter Narrowing
‘override’ Checks
#private Elements
修复 ‘—incremental’ and ‘—watch’ 开启时会明显降低初始启动速度的问题，同时大幅减少 .tsbuildinfo 文件尺寸
自动 Import 改进，主要是顺序问题，import 先写方法，而不是先写库名
注释里可通过 ‘@link’ Tags 做链接

4. CodeSandbox 收购 playdotjs，后者是 iOS 上的 JavaScript IDE

https://twitter.com/codesandbox/status/1397548056426553346

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图4

📝 文章

1. 迁移 15w 行代码的 Webpack 项目到 Vite + ESBuild

https://dev.to/noriste/migrating-a-150k-loc-codebase-to-vite-and-esbuild-why-part-1-3-2idj

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图5

Vite 的优点应该都了解过无数遍了，大家可以主要看看迁移到 Vite 有啥坑。

速度方面，

启动和热更新都是 Vite 快，尤其是热更新
有缓存时刷浏览器，vite（11s）也比 webpack（7s) 慢
vite 构建其实不够快，webpack + esbuild-loader（42s）会比 Vite（58s）快

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图6

其他，

保存多次后，DevTool 的源码 Panel 会包含一个文件的多个版本，影响选择
浏览器前进后退会载入旧的缓存文件，但又不能禁用缓存，因为会慢很多
Vite 比 Webpack 消耗更少的内存，但工作都移到浏览器里了，风扇可以作证
大量 Hot Reload 之后，最好完整刷下页面
部分文件在 Devtools 里设置断点，原因未知
dev 应用比 build 应用慢非常多

2. Deep dive in CORS: History, how it works, and best practices

https://ieftimov.com/post/deep-dive-cors-history-how-it-works-best-practices/

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图7

3. 帮助 Babel 迁移到 ES Modules

https://bigbinary.com/blog/helping-babel-move-to-esm

大家都在迁 ESM，Babel 8 其中一个目标是发布为 ESM 格式。

4. VSCode 的 16 个快捷键

https://dev.to/basecampxd/16-vs-code-shortcuts-for-faster-coding-4k5a

有用！

MDH 前端周刊第 4 期：Chrome 91、Jest 27、TypeScript 4.3 - 图8

5. 尤雨溪：做技术哪有什么两全之策，都是取舍和平衡

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

6. 极简 React 入门配置

https://kentcdodds.com/blog/super-simple-start-to-react

<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
    <script type="text/babel">
      ReactDOM.render(<div>Hello World</div>, document.getElementById('root'))
    </script>
  </body>
</html>