前端食堂技术周刊第 80 期:Vite 4.3、Node.js 20、TS 5.1 Beta、Windi CSS 即将落幕

news/2024/3/28 18:47:23/文章来源:https://blog.csdn.net/weixin_37352936/article/details/130352392

美味值:🌟🌟🌟🌟🌟

口味:东坡肉

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_103042.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中医脉诊仪:结合传统与现代技术的诊断工具

一、引言 随着科技的不断发展,医学领域也取得了举世瞩目的进步。中医作为一种古老的医学体系,始终保持着其独特的魅力。脉诊作为中医诊断的重要方法之一,历经千年的发展和传承,如今在现代科技的助力下,诞生了中医脉诊…

信息安全复习六:公开密钥密码学

一、章节梗概 1.公开密钥密码模型的基本原理 2.两个算法:RSA&D-H算法 主要内容 1.对称密钥密码的密钥交换问题 2.公钥密码模型的提出 3.设计公钥密码的基本要求 4.数字签名 5.RSA算法 6.公钥密码的特征总结 二、对称密钥密码 对称加密算法中,数据…

实例分割算法BlendMask

实例分割算法BlendMask 论文地址:https://arxiv.org/abs/2001.00309 github代码:https://github.com/aim-uofa/AdelaiDet 我的个人空间:我的个人空间 密集实例分割 ​ 密集实例分割主要分为自上而下top-down与自下而上bottom-up两类方法…

基于趋动云的chatGLM-6B模型的部署

首先根据官方示例教程,学会怎么创建项目,怎么使用数据,怎么进入开发环境,以及了解最重要的2个环境变量: 这个是进入开发环境以后的代码目录 $GEMINI_CODE 这个是引用数据集后,数据集存放的路径 $GEMINI_DA…

Linux内核进程管理与调度:策略优化与实践分析

Linux内核进程管理与调度 一、前言二、进程管理和多进程调度2.1 进程标识符和控制块2.2 进程状态和转换2.3 进程间通信 三、单处理器下的Linux进程调度3.1 Linux进程调度器3.2 时间片轮转调度算法3.3 最短剩余时间优先调度算法3.4 其他调度算法的不足 四、多处理器下的Linux进程…

Layui 2.8.0 正式发布,朴实归来

Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢…

【Linux网络】PXE高效批量网络装机

PEX高效批量网络装机 一、部署PXE远程安装服务1.1PXE的优点1.2搭建PXE网络体系的前提条件 二、实现Kincksatrt无人值守安装2.1实验思路,2.2实验:无人值守远程安装2.2.1实现 Kickstart 无人值守安装 一、部署PXE远程安装服务 PXE(预启动执行环…

Flutter ListView组件详解

今天是2023年4月24日 今天重新复习了一下关于ListView的内容,现在就重新整理一下关于ListView的内容和理解 : (1)ListView和Column之间有什么区别? 在我理解中ListView和Column都是可以有很多子组件的组件,它们之间区别在于它们排列的形式和…

100天涨薪4k,从功能测试到自动化测试,我整理的3000字超全学习指南

去年6月份,由于经济压力让我下定决心进阶自动化测试,已经24的我做了3年功能测试,坐标广州薪资定格在8k,可能是生活过的太安逸,觉得8000的工资也够了,但是生活总是多变的,女朋友的突然怀孕&#…

Bsah shell的操作环境

文章目录 Bsah shell的操作环境路径与命令查找顺序使用案例 bash的登录与欢迎信息:/etc/issue、/etc/motdbash的环境配置文件如下login与non-login shell/etc/profile(login shell 才会读)~/.bash_profile(login shell 才会读)source:读入环境配置文件的…

上新了丨高性价比5G智能模组,美格智能SRM700正式发布

伴随着5G、AI、云计算等技术与物联网技术的融合发展,一个万物智联的智能世界正在到来。5G已经成为数字经济重要的基础设施,千行百业的用户都需要依靠高速率、大带宽、低延时的5G技术来构建数字化转型能力。 作为全球领先的无线通信模组及解决方案提供商…

51单片机(一)软硬件环境和单片机介绍

❤️ 专栏简介:本专栏记录了从零学习单片机的过程,其中包括51单片机和STM32单片机两部分;建议先学习51单片机,其实STM32等高级单片机的基础;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 :适用于想要…

HDCTF 2023 复盘

web yamiyami 当时考虑直接读的/proc/self/environ 读到flag是not_flag 就没考虑过/proc/1/environ了 然后不知道py3URL二次编码的特性,读不到源码,无从下手 做flask算pin码的题做多了,还以为pid是1的就是self,难顶 上面那种是非预期 预期是yaml反序列化 先读源码 /read?u…

银行数字化转型导师坚鹏:宏观经济趋势与资本行业机遇和挑战

2023年宏观经济趋势与资本行业机遇和挑战 课程背景: 很多学员存在以下问题: 不知道我国目前的宏观经济形势? 不清楚宏观环境对我国经济的影响? 不知道资本行业未来主要发展趋势? 课程特色: 精彩解…

小案例CSS

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content"widthde…

QMS-云质说质量 - 4 为什么有的质量人不属于质量部?

想管理好质量&#xff0c;首先就要把质量人员放在合适的组织架构中。 对人进行管理&#xff0c;基本原则是&#xff1a;尽量让员工的利益与企业的利益保持同步&#xff0c;虽然无法做到完全重合&#xff0c;但出发点肯定要战略一致。 俗话说“屁股决定脑袋”&#xff0c;因此&a…

IS210AEBIH3BED包含逻辑集成电路、存储器集成电路、专用集成电路

IS210AEBIH3BED包含逻辑集成电路、存储器集成电路、专用集成电路 什么是集成电路测试仪   集成电路测试仪是对集成电路进行测试的专用仪器设备。集成电路测试是保证集成电路性能、质量的关键手段之一。集成电路测试技术是发展集成电路产业的三大支撑技术之一&#xff0c;因此…

ChatGPT课程送账号啦,让你成为新生代AI程序员

ChatGPT能帮助程序员 解决哪些具体问题&#xff1f; 程序员在日常工作中可能会遇到各种各样的问题&#xff0c;如语法错误、逻辑问题、性能问题等等。 不同业务场景的问题&#xff0c;都可以利用ChatGPT获取各自场景下的知识&#xff0c;并使用ChatGPT提供的代码示例和问题解…

Kerberos设计和落地长常识

Kerberos 处理三类安全对象 票证 kerberos票证授予服务给每个客户发一张标记&#xff0c;该标记发送给一个特殊的服务器&#xff0c;证实kerberos最近已经认证了发送者&#xff0c;票证包括过期时间和新生成的会话密钥供客户和服务器使用。 认证 由客户构造的一个标记&#xff…

震惊!为了4680锂电池溯源,竟然做出这种事情

电池溯源&#xff0c;一直都是国家尤为重视的话题。 中国电子技术标准化研究院更是一再强调了&#xff1a;锂电编码标准编制和溯源平台初步建设方案。参会代表围绕锂电编码溯源体系建设有关问题开展了研讨&#xff0c;表示依托行业通用编码标准&#xff0c;建立完善的锂电全生…