code狂魔

V1

2022/11/02阅读:54主题:萌绿

一个比Webpack快700倍比Vite快20倍的打包工具

大家好,我是前端实验室的大师兄!

作为一名前端切图崽,相信大家都对打包工具不陌生,大众熟识的Webpack,Gulp,Rollup,Vite,还有这几天闹得沸沸扬扬的 Turbopack

今天大师兄就带大家认识认识这个宣称比Webpack还要快700倍的Turbopack

Turbopack翻译过来就是涡轮增压

Turbopack

Turbopack被称为Webpack 的继任者。它的创建者也是我们熟知的 Webpack的创建者

速度

Turbopack宣称要比Webpack快700多倍,在更大的应用上,通常会比 Vite 快 20 倍。

由于 Turbopack 只打包开发所需的最少资源,因此启动时间非常快。在具有 3000 个模块的应用上,Turbopack 需要 1.8 秒即可启动,而 Vite 则需要 11.4 秒:

服务启动时间 代码更新更新时间 在 1000 个模块的应用中,Turbopack 对文件更改的速度比 Vite 快 5.8 倍。

为什么这么快?

Turbopack 的架构借鉴了Turborepo和Google的Bazel等工具的经验教训,这两种工具都专注于使用缓存来做两次相同的工作。

它建立在 Turbo 之上:一个开源的、增量的 Rust 记忆框架。Turbo可以缓存程序中任何函数的结果。当程序再次运行时,除非函数的输入已更改,否则函数不会重新运行。这种精细的体系结构使您的程序能够在函数级别跳过大量工作。

Turbopack 目前功能

Turbopack 仍处于 alpha 阶段,目前仅支持一些默认的功能:

  • JavaScript:支持所有 ESNext 功能、Browserslist 和顶层 await;
  • TypeScript:开箱即用地支持 TypeScript,包括解析路径和baseUrl;
  • Imports:支持 require、import、动态导入等;
  • Dev Server:优化的 Dev Server 支持热更新 (HMR) 和快速刷新;
  • CSS:支持全局 CSS、CSS Module、postcss-nested 和 @import;
  • 静态资源:支持 /public 目录、JSON 导入和通过 ESM 导入资源;
  • 环境变量:通过 .env、.env.local 等支持环境变量。

构建 Web 应用的实践非常多样化。仅在 CSS 中,就有 SCSS、Less、CSS Module、PostCSS等。

React、Vue 和 Svelte 等框架需要自定义设置。在当前状态下,Turbopack 还不能配置,所以一些插件也还不可用。到目前为止,Turbopack 可以在 Next.js v13 中使用。未来将发布独立的 CLI、插件 API,并支持其他框架

官网地址:https://vercel.com/blog/turbopack

最后

欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式:在下方公众号后台,回复 111 ,按提示操作即可进群。

关注【前端实验室】公众号回复: bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程

分类:

前端

标签:

工具介绍

作者介绍

code狂魔
V1