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

美味值:🌟🌟🌟🌟🌟

口味:东坡肉

  • 食堂技术周刊仓库地址: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 外围原理解析。

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

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理