likes
comments
collection
share

RichTalk 快报 第 9 期

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

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

这里是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
评论
请登录