一个比Webpack快700倍比 Vite 还快 10 倍打包工具

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

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

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

Turbopack翻译过来就是涡轮增压

Turbopack

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

速度

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

由于 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 ，按提示操作即可进群。