SuperAPI AI 工具集

turbopack

前端与建站

查看项目

更新于 10-16 03:05

技能介绍

用途:Turbopack 是 Vercel 用 Rust 编写的 JavaScript/TypeScript 打包器,在 Next.js 16 中是默认打包器,适合在配置 Next.js 打包、优化 HMR、排查构建问题或对比 Turbopack 与 Webpack 时参考。

主要能力:即时热模块替换(HMR 不随应用规模变慢);文件系统缓存已稳定,开发服务器产物在重启间缓存于磁盘,大项目启动最高快 14 倍,Next.js 16.1+ 默认启用且无需配置,构建缓存尚在计划中;支持浏览器、服务端、Edge、SSR、React Server Components 多环境构建;原生支持 RSC;开箱支持 TypeScript、JSX、CSS、CSS Modules、WebAssembly;基于 Rust 的增量计算引擎。

必要用法:Next.js 16 中配置移到顶层 turbopack(原 experimental.turbopack)。可设 resolveAlias 做别名、resolveExtensions 自定义扩展名解析。CSS 无需额外配置,全局样式在根布局导入,CSS Modules 用 .module.css,PostCSS 读取 postcss.config.js,Tailwind CSS v4 零配置,安装 sass 即可编译 SCSS,命令为 npm install sass。自定义规则可用 turbopack.rules 指定 loaders 与 as,例如 svgr。无法迁移时可用 const nextConfig: NextConfig = { bundler: 'webpack' } 回退。

限制与注意:Turbopack 不直接支持 webpack loader,多数常用 loader 有内置替代(css-loader/style-loader、sass-loader、postcss-loader、file-loader/url-loader 等),raw-loader 改用 import x from './file?raw',worker-loader 用原生 new Worker(new URL(...))。CSS 顺序可能与 webpack 不同,避免依赖跨文件源码顺序的特异性。生产构建支持模块级 tree shaking,建议配合 package.json 的 sideEffects: false。Edge/客户端不允许导入 Node.js 内置模块,服务端专用模块可用 server-only 包强制边界。性能分析可用 NEXT_TURBOPACK_TRACING=1 next dev 或 next build 生成 trace.json,构建内存不足可加 NODE_OPTIONS='--max-old-space-size=8192'。仍需要 webpack 的场景包括无对应实现的 webpack loader、复杂插件配置(如 ModuleFederationPlugin)以及部分尚未支持的特性。