likes
comments
collection
share

RichTalk 快报 第 9 期

作者站长头像
站长
· 阅读数 38

贫瘠的荒漠会开满鲜花,逆境人生终将迎来喝彩。

这里是Tech 快报,每两周为你带来新鲜的技术资讯,如果想第一时间收到更新请关注本知识库。 本期快报速览:

头条

Turbopack: Webpack 的继承者

近期 vercel 推出了一个新的编译工具:Turbopack。号称比 Webpack 快 700 倍,比 Vite 快 10 倍。

RichTalk 快报 第 9 期

Turbopack到底有多快?

可以使用demo项目体验一下对比 Turbopack 和 Vite 的使用体验 RichTalk 快报 第 9 期

Turbopack 尝鲜

$ npx create-next-app --example with-turbopack
$ tnpm i
$ tnpm run dev

Turbopack为什么这么快?

TurbopackVite
增量计算(缓存)

Turbopack 性能的秘诀有两个:高度优化的机器代码低层级增量计算引擎(Turbo引擎)。

  • 基于Rust编写,Rust支持增量计算。它缓存了程序中所有函数的入参和结果,当程序再次运行时,只有参数改变时,函数才会重新运行。这能帮程序避免重复执行相同的工作。(你可以尝试理解为 useMemo)
  • Turbo 引擎当前将其缓存存储在内存中,这意味着缓存将与运行它的进程一样长

RichTalk 快报 第 9 期

我能马上应用Turbopack吗?

虽然 Turbopack 在启动速度和 HMR 上的速度比 Webpack 和 Vite 快。但是:

  • Turbopack 目前处于 alpha 阶段,只能在 Next.js 中使用
  • Turbopack 目前还不支持自定义配置,且不支持任何的插件

这相比于已经相对完善的 Webpack 生态和 Vite 生态,还差了很多。

Turborepo:一个用于 JavaScript 和 TypeScript monorepos 的高性能构建系统

使用 Turborepo

$ npx create-turbo@latest turbo-demo
$ tnpm i
$ tnpm run build

Turborepo 的优势

由于 Turborepo 是基于 turbo 引擎的,所以当我们第 2 次构建项目时,打包速度将会快很多倍。turbo 引擎通过 智能缓存任务调度,提升构建速度,节省计算资源。 我们可以在 package.json中添加 turbo配置:

{
  "turbo": {
    "pipeline": {
      "build": {
        "dependsOn": ["^build"],        
        "outputs": [".next/**"]            
      },
      "test": {
        "dependsOn": ["^build"],
        "outputs": []                            
      },
      "lint": {
        "outputs": []
      },
      "dev": {
        "cache": false            
      } 
    }    
  }
}

那么如果分别使用 Lerna 和 Turbopack 执行 tnpm run lint test build deploy 命令:

RichTalk 快报 第 9 期

从 Lerna 迁移至 Turborepo

  1. 安装依赖
tnpm install turbo -D
  1. 修改 package.json配置

RichTalk 快报 第 9 期

精选

V8 引擎:基于类型推测的性能优化原理

www.51cto.com/article/721…

这篇文章通过介绍V8内基于推测的优化的技术,说明为什么需要TypeScript。

RichTalk 快报 第 9 期 以上是一张简易的 V8 引擎执行代码的流程。V8在执行代码过程中,存在大量的数据操作处理,为了顺利完成数据处理(比如:add),必须要对操作的数据进行类型的判断。每次都做类型判断会是一个比较大的消耗,所以V8在执行过程中会收集反馈信息存储到反馈向量,用来推测数据值的类型,减少类型判断,优化代码(Optimize & Compole it)性能。

这不是最优的方案,这样的优化方式并不足够彻底,最优方案的准则是:

  1. 确保你的代码是什么形状很重要
  2. 确保你的代码固定在某个形状上

Typescript正好满足这两点,可以帮助 V8 解决类型判断的问题。

动态

  • 哈啰 Quark Design 正式开源,新一代跨技术栈前端组件库 几个核心点:
    • 移动端组件库
    • 使用Web-Component
      • shadow dom结构清晰,style 和 dom 结构分离
      • 天生的css隔离以及事件隔离,但也意味着无法完成css穿透
    • 不依赖技术栈(eg. Vue、React、Angular 等)。这个应该是核心卖点了,跨框架的思路很棒

另外,作为移动端组件,样式的需求可能会更富有多样性,如果可以融合 Headless UI 的概念,组件库本身只负责逻辑处理,将样式留给用户自行处理,这将会更棒!

转载自:https://juejin.cn/post/7163615853815005220
评论
请登录