Next.js 13 发布,推出快 700 倍的基于 Rust 的 Webpack 替代品


Next.js 13 现已发布,一些亮点更新内容包括:

  • app/ Directory (beta):更简单、更快、更少的客户端 JS。
    • Layouts
    • React Server Components
    • Streaming
  • Turbopack (alpha):速度提高 700 倍的基于 Rust 的 Webpack 替代品。
  • 新的 next/image (stable)native browser 延迟加载速度更快。
  • 新的@next/font(beta)具有零布局偏移的自动自托管字体。
  • 改进next/linkSimplified API with automatic <a>

更新:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

 app/ Directory (beta)

通过引入 app/ directory (beta) 来改进 Next.js 中的路由和布局,这是之前为征求社区反馈而发布的 Layouts RFC的结果。包括对以下内容的支持:

  • Layouts:轻松共享 UI,同时保留状态并避免重新渲染。
  • Server Components:使服务器优先成为大多数动态应用程序的默认设置。
  • Streaming:显示即时加载状态并流式传输更新。
  • Suspense for Data Fetching新的usehook 支持 component-level fetching。

该 app/ directory 可以与现有 pages directory 共存以进行 incremental adoption。公告指出,虽然在升级到 Next.js 13 时不需要使用该 app/ directory,但其正在为构建复杂的 interfaces 奠定基础,同时减少 JavaScript 的数量。

引入 Turbopack (alpha)

Next.js 13 中包含 Turbopack —— Webpack 的新的基于 Rust 的继任者。

Webpack 已被下载超过30 亿次。虽然它是构建 Web 不可或缺的一部分,但我们已经达到了基于 JavaScript 的工具所能达到的最大性能的极限。在 Next.js 12 中,我们开始过渡到 native Rust 驱动的工具。我们首先从 Babel 迁移,这导致转译速度提高了 17 倍。然后,我们替换了 Terser,这使得 minification 提高了 6 倍。现在是时候全身心投入到原生的捆绑工作中去了。

将 Turbopack alpha 与 Next.js 13 一起使用可以:

  • 更新速度比 Webpack 快700 倍
  • 更新速度比 Vite 快 10 倍
  • cold starts 速度比 Webpack 快 4 倍

 

根据介绍,Turbopack只捆绑开发中所需要的最小资产,所以启动时间非常快。在一个有3000个模块的应用程序中,Turbopack的启动时间为1.8秒。Vite需要11.4秒,Webpack需要16.5秒。

Turbopack 对服务器组件、TypeScript、JSX、CSS 等提供了开箱即用的支持。不过在 Alpha 版期间,许多功能尚不受支持。

注意: Next.js 中的 Turbopack 目前仅支持next dev,可查看支持的功能。开发团队还在努力通过 Turbopack添加next build支持。

可在 Next.js 13 中通过next dev --turbo试用 Turbopack alpha.

更多详情可查看官方公告。


相關推薦

2022-11-02

化的增量打包工具和构建系统,采用 Rust 编写,声称是 Webpack 的继任者。 其实 Turbopack 正是出自 Webpack 作者 Tobias Koppers 之手,这是他去年加入 Vercel 之后所主导的核心项目。Tobias 深度参与了 Turbopack 的开发。 官方在宣传 Turbop

2023-02-26

link 和 TypeScript 防止链接错误 Turbopack 改进(Alpha):与 Webpack 加载器的兼容性和改进的支持 Next.js Cache (Beta):渐进式 ISR 和更快地重新部署代码变化 更多详情可查看:https://nextjs.org/blog/next-13-2

2023-09-22

用 JavaScript Web 应用程序的小型框架,该框架基于 React、Webpack 和 Babel 构建,为该网站提供了强大的支持。 新版本主要变化 本地服务器启动速度提升 22%:使用 App 和 Pages Router 可以更快地进行迭代 HMR(快速刷新)速度

2023-05-06

k 已经准备好进入测试阶段。 Turbopack 目前还没有完全与 webpack 和 Next.js 实现功能对等,不过现在应该可以支持大部分的使用情况了。我们在这个测试版中的目标是继续解决因采用率增加而产生的剩余错误,并为未来版本的稳定

2023-03-12

介绍,Rspack 是一个基于 Rust 的高性能构建引擎,具备与 Webpack 生态系统的互操作性,可以被 Webpack 项目低成本集成,并提供更好的构建性能。 特性 启动速度极快: 基于 Rust 实现,构建速度极快,带给你极致的开发体验。

2023-09-19

子项目完成,Nue 将成为 Vite、Next.js 和 Astro 等项目的重要替代品。

2023-01-20

旧不俗,留存率为 98.4%,兴趣为 81.7%,使用率约为 50%。Webpack 仍然以 84.8% 的使用率领先,但 Vite 赢得了“采用率最高的技术”的调查,得分逐年上升。 6、JavaScript 现状 —— Monorepo 工具 此次调查也展示了有关 monorepo 工具

2022-04-08

集成;它还支持 Corepack(实验性的 Node.js 工具) ESM 对 webpack 配置的支持:从现在开始,webpack 编码辅助将与你 webpack.config.js 文件中的 ES 模块一起使用 对 Docker 的改进:重新设计了 Docker 在 Services 工具窗口中的 UI,并增加了

2023-04-10

Next.js 13.3 近日正式发布,新版本添加了多个社区用户要求的受欢迎的功能,并会在下一个次要版本中将 App Router 标记为稳定,Next.js 13.3 具体更新内容包括: 基于文件的 Metadata API 在 Next.js 13.2 中,Next.js 公布了一个新的 Metadata

2022-12-24

Next.js 13.1 近日正式发布,主要改进内容包括: app目录(测试版)的改进:改进了可靠性和性能 内置模块转译:将 next-transpile-modules 功能带入核心 Edge 运行时(稳定版):用于 Edge 的轻量级 Node.js 运行时 Turbopack 更新:支

2022-08-27

:新的 Next.js 功能通常在 Netlify 平台上由 Next.js 开源团队发布之日就本地启用、测试和支持。 增强的用户体验:Next.js 开发人员在其网站和应用程序的构建和部署工作流程中可拥有无缝的用户体验。 根据介绍,目前已有一些

2022-08-26

花了一年多在私人测试版中单独构建该项目。现如今,在发布两个月后,Bun 已在 GitHub 上拥有超过 32000 个 star,Bun 的 discord 服务器上也有 14000 名成员;共有 100 多人为 Bun 做出了贡献。“Bun 是一个非常大的、雄心勃勃的项目。

2023-10-30

提供了网站托管服务,让开发者能够在上面开发、预览和发布 Web 应用,同时优化了前端开发者的开发和部署体验。 Next.js 14 主要变化: Turbopack: App & 页面路由通过了 5000 项测试 本地服务器启动速度提升 53% 使

2022-12-17

Next.js 框架背后的开发商 Vercel 宣布推出 Edge Functions,现已面向所有客户全面推出 (GA)。 根据介绍,Vercel Edge Functions 是 JavaScript、TypeScript 或 WebAssembly functions,通常比传统的 Serverless compute 更高效、更快速,因为它们在一个更精