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

news2024/11/22 0:53:37

美味值:🌟🌟🌟🌟🌟

口味:东坡肉

  • 食堂技术周刊仓库地址: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.coloradmin.cn/o/457562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot项目的jar文件以打包成docker镜像的方式部署

清单: 安装有docker的Linuxspringboot打包的jar文件(该项目只有一个返回"hello world"接口) Linux的IP地址:192.168.221.129 springboot项目的接口: 1、上传jar文件至Linux 我上传的位置为:/…

4.2——派生类的构造函数和析构函数

派生类继承了基类的成员,实现了原有代码的重用,但是基类的构造函数和析构函数不能被继承,在派生类中,如果对派生类新增的成员进行初始化,就需要加入派生类的构造函数。与此同时,对所有从基类继承下来的成员…

SpringMVC-学习修改尚硅谷最新教程笔记

三、SpringMVC 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分 M:Model,模型层,指工程中的JavaBean,作用是处理数据 JavaBean分为两类: **一类称为实…

【JAVA-模块五 数组】

JAVA-模块五 数组 一、数组(一维)1.1数组是什么?1.2java中数组静态初始化:(存)两种定义格式:数组初始化格式:静态初始化后,打印数组名: 1.3 数组元素访问&…

win11 环境下streamlit使用pycharm debug

目录 1. pycharm中配置run 脚本2. streamlit3. 开始debug调试 1. pycharm中配置run 脚本 (一)点击 Edit Configurations,按图操作. 2. streamlit 1.streamlit 安装在 anaconda 的 base 环境(随意哈,安装哪里都可以&#xff0c…

Zookeeper 面试题总结

Zookeeper 1、工作中 Zookeeper 有什么用途吗2、zookeeper 数据模型是什么样的3、那你知道 znode 有几种类型呢4、你知道 znode 节点里面存储什么吗5、每个节点数据最大不能超过多少呢6、你知道 znode 节点上监听机制嘛7、那你讲下 Zookeeper 特性吧8、你刚提到顺序一致性&…

LRU缓存淘汰策略——面试高频

⭐️前言⭐️ 本文主要介绍在面试中常见的高频手撕算法题目,LRU算法, 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主将持续更新学习记录收获,友友们有任何问题可以在评论区…

LEVIR-CD遥感建筑变化检测数据集

LEVIR-CD是一个新的大规模遥感二元变化检测数据集,它将有助于开发新的基于深度学习的遥感图像变化检测算法。 下载地址:https://justchenhao.github.io/LEVIR/ 历史消息 20230311:我们为LEVIR_CD中的每个样本补充了地理空间信息(例如&#…

实例分割算法BlendMask

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

Node.js代码实例:简单Web服务端

文章目录 前言代码仓库为什么要写一份Node.js简单Web服务端的代码实例?内容目录结构代码server.jsindex.htmlindex.cssindex.jsvalue.html 结果总结参考资料作者的话 前言 Node.js代码实例:简单Web服务端。 代码仓库 yezhening/Programming-examples: …

LVS-DR

系列文章目录 文章目录 系列文章目录一、1.2. 二、实验1.2. 总结 一、 1. 2. 二、实验 1. 先把四台机器都关闭防火墙和安全机制 vim /etc/sysconfig/selinux把selinux都改成disabled 在NFS里面建立两个共享目录 给文件执行权限并写入内容给html 和www vim /etc/expor…

【C++】C++中的类型转化

说起类型转化,我们在C语言之前的学习中可以了解到,类型转换可以分为两种情况:隐式类型转化;显示类型转化。但是为什么在c中还要继续对类型转化做文章呢?我们一起来看: 目录 1. C语言中的类型转换 2. C强制…

【Transformer系列(5)】Transformer代码超详细解读(Pytorch)

前言 前面几篇我们一起读了transformer的论文,更进一步了解了它的模型架构,这一篇呢,我们就来看看它是如何代码实现的! (建议大家在读这一篇之前,先去看看上一篇模型结构讲解 这样可以理解更深刻噢&…

Python 基础(十二):字典

❤️ 博客主页:水滴技术 🌸 订阅专栏:Python 入门核心技术 🚀 支持水滴:点赞👍 收藏⭐ 留言💬 文章目录 一、声明字典1.1 使用 {} 声明字典1.2 使用 dict 函数声明字典1.3 声明一个空的字典 二…

【数据结构】AVLTree

1.AVL树的概念 二叉搜索树虽可以缩短查找的效率,但如果数据有序或接近有序二叉搜索树将退化为单支树,查找元素相当于在顺序表中搜索元素,效率低下。因此,两位俄罗斯的数G.M.Adelson-Velskii 和E.M.Landis在1962年 发明了一种解决上…

会话与会话技术(Session)

前言 Cookie将用户的信息保存在各自的浏览器中,并且可以在多次请求下实现数据的共享。但是如果当传递的信息较多时,Cookie技术会增大服务器程序处理的难度,因此,Servlet提供了另一种会话技术————Session,Session可…

跟李沐学AI——实用机器学习(入门版)

机器学习目录 2.1 探索性数据分析 2.2 数据清理 2.3 数据变换 2.4 特征工程 2.5 数据科学家的日常 Stanford University Practical machine learning 2.1 探索性数据分析 ​ 对目标的ftr数据进行处理,针对不同的信息做出不同的图形 输出数据集的行数和列数以及前十…

ArcGIS Pro地理空间数据处理完整工作流实训及python技术融合

GIS是利用电子计算机及其外部设备,采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲,它是在一定的地域内,将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来,达到对地理和属性信息的综合管理。GIS的…

1、TI335x环境建立

记录裸机开发,TI A8系列处理器的AM335x过程,本次开发的是3352,在此基础上开发。 1、硬件准备: 已经测试调试ok的3352测试板,经过查看发现,am3352引出的下载接口是JTAG口,而我手里只有Jlink&…

Kubernetes---Pod调度、标签、配额、策略

静态pod 静态pod由user直接创建调用,不能迁移 由kebelet守护进程直接管理的pod,无需APIserver监管 kubelet监视每个静态pod 静态pod永远绑定到一个指定节点上的kubelet 静态pod spec不能引用其他API对象 静态pod配置路径/var/lib/kubelet/config.yaml里面…