乐趣区

关于vite:前端食堂技术周刊第-80-期Vite-43Nodejs-20TS-51-BetaWindi-CSS-即将落幕

jiezi

美味值：🌟🌟🌟🌟🌟

口味：东坡肉

  • 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly

本期摘要

  • Vite 4.3
  • Node.js 20
  • TypeScript 5.1 Beta
  • Windi CSS 行将闭幕
  • Pretty TypeScript Errors
  • ESM-CJS interop test
  • 负载平衡可视化
  • The JavaScript Oxidation Compiler
  • rrweb 实现原理

大家好，我是童欧巴。欢送来到前端食堂技术周刊，咱们先来看下上周的技术资讯。

技术资讯

1. Vite 4.3

在这次的 migor 版本更新中，Vite 专一于进步开发服务器的性能，解析逻辑失去优化，进步了热门路性能，并为查找 package.json、TS 配置文件和已解析 URL 实现了更智能的缓存。如果你对引擎盖下的原理感兴趣，能够参考这篇博文 如何让 Vite 4.3 变得更快。

对于性能剖析：

  • Vite 团队正在开发一个官网的 Vite 基准测试工具，用于获取每个 Pull Request 的性能指标。
  • vite-plugin-inspect 当初具备更多与性能相干的性能，可帮忙开发者辨认出插件或中间件的性能。
  • 应用 vite --profile，而后在页面加载后按 p 键将保留开发服务器启动的 CPU 性能剖析文件，能够在相似 speedscope 的利用中关上它们，来辨认性能问题。

2. Node.js 20

次要个性如下：

  • 🧪引入权限模型
  • 自定义 ESM 加载器钩子在专用线程上运行，与主线程隔离
  • 同步的 import.meta.resolve()，与浏览器行为保持一致
  • V8 降级到 11.3
  • Test Runner 达到稳固状态
  • 装备了最新版本的 URL 解析器 Ada 2.0，为 URL 解析带来了显著的性能改良
  • 单个可执行利用当初须要注入 Blob
  • Web Crypto API 函数参数现已依照 WebIDL 的定义，进行强制和验证，晋升了与 Web Crypto API 的其余实现的互操作性
  • 官网反对 ARM64 Windows
  • WASI 的版本须要被指定

3. TypeScript 5.1 Beta

次要个性如下：

  • 容许函数返回类型为 undefined 的函数没有 return 语句
  • 容许 Getter 和 Setter 之间具备齐全无关的类型
  • 解耦 JSX Elements 和 JSX Tag Types 的类型查看
  • 反对在应用 JSX 时对属性名称进行命名
  • 当指定的模块查找策略无奈解析门路时，将解析绝对于指定 typeRoots 的包
  • JSX Tags 反对链接成对儿进行编辑
  • JSDoc 标签 @param 提供片段补全
  • 优化：防止不必要的类型实例化、联结类型字面量的负面案例查看、缩小对解析 JSDoc 的扫描器的调用
  • 最低运行时环境要求：ES2020、Node.js 14.17
  • 明确的 typeRoots 禁用了 node_modules/@types 的向上查找

4. Windi CSS 行将闭幕

Windi CSS 的诞生最后是为了摸索解决 Tailwind 的性能问题，它的按需引入办法起初启发了 Tailwind 实现 JIT 引擎。引入的诸如 Variant Group、Shortcuts、Attributify Mode、Visual Analyzer 等晋升开发者体验的翻新性能，也影响了 UnoCSS 的设计，并显著进步了其余 Atom CSS 框架的开发者体验。不过因为团队成员的工夫无限，Windi CSS 按下了暂停键，我的项目将不会增加新性能，只会依据须要提供平安修复。对于新我的项目，举荐应用 UnoCSS 或 Tailwind CSS 作为代替。

上面咱们来看技术材料。

技术材料

1. Pretty TypeScript Errors

随着类型复杂性的减少，TypeScript 谬误会变得越来越凌乱，如：... more ..., {...}。这款 VS Code 插件晋升了 TypeScript 谬误的易读性。其蕴含的一些个性如下：

  • 在谬误音讯中，为类型提供与你主题色彩相匹配的语法高亮，反对亮暗主题
  • 在谬误音讯中的类型旁边有一个按钮，疏导至相干类型申明
  • 提供按钮可导航至 typescript.tv，提供了具体的解释，有的还提供了相干解读视频
  • 提供按钮可导航至 ts-error-translator，用通俗易懂的英语来浏览谬误

2. ESM-CJS interop test

Webpack 作者保护的 ESM 和 CJS 互操作性测试表，测试对象包含 Node.js、Babel、Webpack、Rollup、esbuild 等。

3. 负载平衡可视化

负载平衡算法的可视化指南，文末还提供了 Playground。

4. The JavaScript Oxidation Compiler

Oxidation 编译器用 Rust 编写，正在为 JavaScript、TypeScript 语言创立一整工具链，目前处于晚期阶段，提供了包含 AST、Parser、Linter、Formatter、Transpiler、Minifier 等工具。

5. rrweb 实现原理

rrweb 外围原理解析。

好了，以上就是本期的食堂周刊，观众老爷们如果感觉还不错，一键三连是对食堂老板最大的反对。

你的前端食堂，吃好每一顿饭，咱们下期见。

退出移动版