RichTalk 快报 第 9 期
贫瘠的荒漠会开满鲜花,逆境人生终将迎来喝彩。
这里是Tech 快报,每两周为你带来新鲜的技术资讯,如果想第一时间收到更新请关注本知识库。 本期快报速览:
- Turbopack: Webpack 的继承者
- Turborepo:一个用于 JavaScript 和 TypeScript monorepos 的高性能构建系统
- V8 引擎:基于类型推测的性能优化原理
头条
Turbopack: Webpack 的继承者
近期 vercel 推出了一个新的编译工具:Turbopack。号称比 Webpack 快 700 倍,比 Vite 快 10 倍。
Turbopack到底有多快?
可以使用demo项目体验一下对比 Turbopack 和 Vite 的使用体验
Turbopack 尝鲜
$ npx create-next-app --example with-turbopack
$ tnpm i
$ tnpm run dev
Turbopack为什么这么快?
Turbopack | Vite | |
---|---|---|
增量计算(缓存) | ✅ | ❎ |
Turbopack 性能的秘诀有两个:高度优化的机器代码和低层级增量计算引擎(Turbo引擎)。
- 基于Rust编写,Rust支持增量计算。它缓存了程序中所有函数的入参和结果,当程序再次运行时,只有参数改变时,函数才会重新运行。这能帮程序避免重复执行相同的工作。(你可以尝试理解为 useMemo)
- Turbo 引擎当前将其缓存存储在内存中,这意味着缓存将与运行它的进程一样长
我能马上应用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
命令:
从 Lerna 迁移至 Turborepo
- 安装依赖
tnpm install turbo -D
- 修改
package.json
配置
精选
V8 引擎:基于类型推测的性能优化原理
这篇文章通过介绍V8内基于推测的优化的技术,说明为什么需要TypeScript。
以上是一张简易的 V8 引擎执行代码的流程。V8在执行代码过程中,存在大量的数据操作处理,为了顺利完成数据处理(比如:add),必须要对操作的数据进行类型的判断。每次都做类型判断会是一个比较大的消耗,所以V8在执行过程中会收集反馈信息存储到反馈向量,用来推测数据值的类型,减少类型判断,优化代码(Optimize & Compole it)性能。
这不是最优的方案,这样的优化方式并不足够彻底,最优方案的准则是:
- 确保你的代码是什么形状很重要
- 确保你的代码固定在某个形状上
Typescript正好满足这两点,可以帮助 V8 解决类型判断的问题。
动态
- 哈啰 Quark Design 正式开源,新一代跨技术栈前端组件库 几个核心点:
- 移动端组件库
- 使用Web-Component
- shadow dom结构清晰,style 和 dom 结构分离
- 天生的css隔离以及事件隔离,但也意味着无法完成css穿透
- 不依赖技术栈(eg. Vue、React、Angular 等)。这个应该是核心卖点了,跨框架的思路很棒
另外,作为移动端组件,样式的需求可能会更富有多样性,如果可以融合 Headless UI 的概念,组件库本身只负责逻辑处理,将样式留给用户自行处理,这将会更棒!
转载自:https://juejin.cn/post/7163615853815005220