← 回總覽

Turbopack:Next.js 16.2 有哪些新功能

📅 2026-03-19 04:00 Andrew Imm, Tim Neutkens 软件编程 7 分鐘 8084 字 評分: 82
Next.js Turbopack 前端开发 Web 性能 构建工具
📌 一句话摘要 Next.js 16.2 引入了重大的 Turbopack 增强功能,其中最引人注目的是全新的 Server Fast Refresh 系统,它极大地提高了开发迭代速度;此外还包括 SRI 支持、动态导入 Tree Shaking 和细粒度加载器配置等新特性。 📝 详细摘要 本文详细介绍了 Next.js 16.2 中 Turbopack 的更新,重点关注性能和开发者体验。最突出的功能是全新的 Server Fast Refresh,它利用模块图(module graph)知识优化了服务端热重载,从而实现了显著的速度提升(编译时间最高缩短 900%)。其他关键新增功能包括用

Title: Turbopack: What's New in Next.js 16.2 | BestBlogs.dev

URL Source: https://www.bestblogs.dev/article/d3260fc2

Published Time: 2026-03-18 20:00:00

Markdown Content: Two releases after Turbopack became the default bundler for Next.js, we're focused on improving performance, fixing bugs, and increasing parity. Here are some of the latest features shipping as part of Next.js 16.2.

* Server Fast Refresh: Fine-grained server-side hot reloading * Web Worker Origin: Increasing support for WASM libraries in Workers * Subresource Integrity Support: Subresource Integrity for JavaScript files * Tree Shaking of Dynamic Imports: Unused exports removed from dynamic import() * Inline Loader Configuration: Per-import loader configuration via import attributes * Lightning CSS Configuration: Experimental LightningCSS configuration options * Log Filtering: Suppressing noisy logs and warnings with ignoreIssue * postcss.config.ts Support: TypeScript PostCSS configuration * Performance Improvements and Bug Fixes: Over 200 changes and bug fixes

Looking forward towards our next release, we'll be focused on speeding up compiler performance and reducing memory usage.

Server Fast Refresh[](https://www.bestblogs.dev/article/d3260fc2#server-fast-refresh)

We've reworked how server-side code is reloaded during development. The previous system cleared the require.cache for the changed module and all other modules in its import chain. This approach often reloaded more code than necessary, including unchanged node_modules.

The new system brings the same Fast Refresh approach used in the browser to your server code. Turbopack's knowledge of the module graph means only the module that actually changed is reloaded, leaving the rest intact. This makes server-side hot reloading significantly more efficient.

In real-world Next.js applications, we've seen 67-100% faster application refresh and 400-900% faster compile time inside Next.js. These results scale from the smallest "hello world" starter project to large sites like vercel.com.

Today we're enabling this feature for all developers, by default. Proxy and Route Handlers will use the existing system today, but support for those is arriving in a future release. Share your feedback or any issues with this new feature on GitHub.

Web Worker Origin[](https://www.bestblogs.dev/article/d3260fc2#web-worker-origin)

Previously, Web Workers were bootstrapped through a blob:// URL. This streamlined loading the worker, but it set an empty location.origin value. Web Worker code that tried to use importScripts() or fetch() (usually in third-party libraries) would have been unable to resolve the request without changes.

With the updated Worker bootstrap code, the origin correctly points to your domain name, and relative fetches succeed. This should unblock anyone who had trouble running WASM code inside a Worker in previous versions.

Subresource Integrity Support[](https://www.bestblogs.dev/article/d3260fc2#subresource-integrity-support)

Turbopack now supports Subresource Integrity (SRI). SRI generates cryptographic hashes of your JavaScript files at build time, allowing browsers to verify that files haven't been modified.

Browsers provide a technology called Content Security Policy that allows sites to restrict the JavaScript that can run, eliminating entire classes of security issues. However, the typical nonce-based method for implementing this requires all pages to be dynamically rendered, impacting performance. Subresource Integrity is an alternative that computes a hash of each script ahead of time, and only allows the browser to execute scripts with approved hashes.

Tree Shaking of Dynamic Imports[](https://www.bestblogs.dev/article/d3260fc2#tree-shaking-of-dynamic-imports)

Turbopack now tree shakes destructured dynamic imports the same way it does static imports. Unused exports are removed from the bundle:

This is now equivalent to a static import for tree shaking purposes — any exports from ./lib that aren't used will be tree-shaken.

Inline Loader Configuration[](https://www.bestblogs.dev/article/d3260fc2#inline-loader-configuration)

Turbopack now supports per-import loader configuration via import attributes. Instead of applying loaders globally through turbopack.rules, you can configure them on individual imports using the with clause:

This is useful when only a specific import needs special treatment, avoiding side effects on other imports of the same file type. The available attributes are turbopackLoader, turbopackLoaderOptions, turbopackAs, and turbopackModuleType.

You should still prefer configuring your loaders in next.config.ts when possible, since code using inline loaders is less portable. This option is more useful for code generated from plugins or loaders.

Lightning CSS Configuration[](https://www.bestblogs.dev/article/d3260fc2#lightning-css-configuration)

Lightning CSS is a fast, Rust-based CSS transformer used by Turbopack for CSS minification and prefixing. It also allows implementation of modern CSS features on older browsers, similar to what Babel or SWC do for JavaScript. Previously, the only way to toggle these settings was through a Browserslist configuration. Now with the experimental lightningCssFeatures option, you can force certain features to always or never transpile.

Log Filtering[](https://www.bestblogs.dev/article/d3260fc2#log-filtering)

Turbopack can now suppress noisy or expected warnings from streaming logs with the turbopack.ignoreIssue config option. This is useful for suppressing warnings from third-party code, generated files, or optional dependencies, as well as hiding expected errors from the Next.js error overlay.

You can match logs generated from specific code paths, as well as filter for specific title/description strings or patterns.

postcss.config.ts Support[](https://www.bestblogs.dev/article/d3260fc2#postcssconfigts-support)

Turbopack now supports postcss.config.ts in addition to the existing .js and .cjs variants.

Performance Improvements and Bug Fixes[](https://www.bestblogs.dev/article/d3260fc2#performance-improvements-and-bug-fixes)

We've continued to invest in improving Turbopack internals. Over 200 changes and bug fixes have improved stability and compatibility across a wide range of projects. Optimizations in data encoding, internal representation formats, and hashing algorithms have improved memory usage and build time. We've made error logs clearer and expanded diagnostics to help you better understand compiler errors. We've also used your GitHub Issues as a guide for which features were missing since the 16.1 release.

Feedback and Community[](https://www.bestblogs.dev/article/d3260fc2#feedback-and-community)

Share your feedback and help shape the future of Next.js:

* GitHub Discussions * GitHub Issues * Discord Community

查看原文 → 發佈: 2026-03-19 04:00:00 收錄: 2026-03-19 10:00:54

🤖 問 AI

針對這篇文章提問,AI 會根據文章內容回答。按 Ctrl+Enter 送出。