优米宠物碗 發表於 2023-9-23 23:14:00

Next.js 13.5 正式发布，速度大幅提升！

<p>9 月 19 日，Next.js 13.5 正式发布，该版本通过以下方式提高了本地开发性能和可靠性：</p>
<ul>
<li>
<p><strong>本地服务器启动速度提高 22%</strong>：使用App和Pages Router可以更快地进行迭代</p>
</li>
<li>
<p><strong>HMR（快速刷新）速度提高 29%</strong>：在保存更改时进行更快的迭代</p>
</li>
<li>
<p><strong>内存使用量减少 40%</strong>：在运行<code>next start</code> 时测量</p>
</li>
<li>
<p><strong>优化的包导入</strong>：使用流行的图标和组件库时进行更快的更新</p>
</li>
<li>
<p><strong>next/image 改进</strong>：支持<code>&lt;picture&gt;</code>标签、暗模式等</p>
</li>
<li>
<p>修复了超过 438 个错误！</p>
</li>
</ul>
<h2 id="改善启动和快速刷新时间"><strong>改善启动和快速刷新时间</strong></h2>
<p>App Router 的采用在持续增加，根据 HTTP Archive 对前1000万个网站进行的统计数据来看，其增长速度达到了每月 <strong>80%</strong>。</p>
<p><img src="//img1.sycdn.imooc.com/650db42d0001db4410800497.jpg" alt="图片" loading="lazy"></p>
<p>image.png</p>
<p>自 Next.js 13.4 版本以来，Next.js 团队的重点一直是改进 App Router 应用的性能和可靠性。将13.4与13.5版本进行比较，在一个新的应用上，可以看到以下改进：</p>
<ul>
<li>
<p>本地服务器启动速度<strong>提高 22%</strong></p>
</li>
<li>
<p>HMR（快速刷新）<strong>速度提高 29%</strong></p>
</li>
<li>
<p>内存使用量<strong>减少 40%</strong></p>
</li>
</ul>
<p>通过以下优化方法实现了这种性能提升：</p>
<ul>
<li>
<p>通过缓存或减少慢速操作来减少工作量</p>
</li>
<li>
<p>优化昂贵的文件系统操作</p>
</li>
<li>
<p>在编译过程中实现更好的增量树遍历</p>
</li>
<li>
<p>将不必要的阻塞同步调用改为懒加载</p>
</li>
<li>
<p>自动配置大型图标库</p>
</li>
</ul>
<p>Next.js 用户 Hanford 在他们的测试中报告了其编译速度提升 87-92%！</p>
<p><img src="//img1.sycdn.imooc.com/650db42d0001eba310800313.jpg" alt="图片" loading="lazy"></p>
<p>image.png</p>
<p>在继续迭代和改进当前打包工具性能的同时，Next.js 团队还在开发 Turbopack（beta）以进一步提高性能。在13.5版本中，<code>next dev --turbo</code>现在支持更多功能。</p>
<h2 id="优化的包导入"><strong>优化的包导入</strong></h2>
<p>此版本对包导入进行了令人兴奋的突破，改善了在使用大型图标或组件库以及其他重新导出了数百或数千个模块的依赖项时的本地开发性能和生产冷启动速度。</p>
<p>之前，添加了<code>modularizeImports</code>的支持，使开发者能够配置在使用这些库时如何解析导入。在13.5版本中，用<code>optimizePackageImports</code>替代了这个选项，它不需要指定导入映射，而是会自动优化导入。</p>
<p>像<code>@mui/icons-material</code>、<code>@mui/material</code>、<code>date-fns</code>、<code>lodash</code>、<code>lodash-es</code>、<code>ramda</code>、<code>react-bootstrap</code>、<code>@headlessui/react</code>、<code>@heroicons/react</code>和l<code>ucide-react</code>等库现在都可以自动优化，只加载实际使用的模块，同时方便编写带有很多命名导出的导入语句。</p>
<h2 id="nextimage-改进">next/image 改进</h2>
<p>基于社区的反馈，此版本添加了一个新的实验性函数<code>unstable_getImgProps()</code>，以支持不直接使用<code>&lt;Image&gt;</code>组件的高级用例，包括：</p>
<ul>
<li>
<p>处理<code>background-image</code>或<code>image-set</code></p>
</li>
<li>
<p>使用canvas的<code>context.drawImage()</code>或<code>new Image()</code>时进行操作</p>
</li>
<li>
<p>使用<code>&lt;picture&gt;</code>媒体查询来实现艺术方向或明/暗模式图片</p>
</li>
<li>
<p>利用<code>&lt;picture&gt;</code>元素的媒体查询功能，实现明/暗模式图片的切换。</p>
</li>
</ul>
<pre><code>import { unstable_getImgProps as getImgProps } from 'next/image';



export default function Page() {

const common = { alt: 'Hero', width: 800, height: 400 };

const {

    props: { srcSet: dark },

} = getImgProps({ ...common, src: '/dark.png' });

const {

    props: { srcSet: light, ...rest },

} = getImgProps({ ...common, src: '/light.png' });



return (

    &lt;picture&gt;

      &lt;source media="(prefers-color-scheme: dark)" srcSet={dark} /&gt;

      &lt;source media="(prefers-color-scheme: light)" srcSet={light} /&gt;

      &lt;img {...rest} /&gt;

    &lt;/picture&gt;

);

}

</code></pre>
<p>此外，现在<code>placeholder</code>属性支持提供任意的<code>data:image/</code>作为占位图像，这些图像不会被模糊处理。</p>
<h2 id="其他改进"><strong>其他改进</strong></h2>
<p>自从13.4.0版本以来，我修复了超过438个错误，并进行了各种改进，包括：</p>
<ul>
<li>
<p>[文档] 关于表单和变异的新文档</p>
</li>
<li>
<p>[文档] 关于服务端和客户端组件的新文档</p>
</li>
<li>
<p>[文档] 关于内容安全策略和非ces的新文档</p>
</li>
<li>
<p>[文档] 关于缓存和重新验证的新文档</p>
</li>
<li>
<p>[功能] 在页面路由器中增加了对<code>next/navigation</code>中的<code>useParams</code>和<code>useSearchParams</code>的支持，以便逐步采用</p>
</li>
<li>
<p>[功能] 在<code>router.push</code> / <code>router.replace</code>上支持<code>scroll: false</code></p>
</li>
<li>
<p>[功能] 在<code>next/link</code>上支持<code>scroll={false}</code></p>
</li>
<li>
<p>[功能] 开发环境支持HTTPS：<code>next dev --experimental-https</code></p>
</li>
<li>
<p>[功能] 增加了对<code>cookies().has()</code>的支持</p>
</li>
<li>
<p>[功能] 增加了对IPv6主机名的支持</p>
</li>
<li>
<p>[功能] App Router现在支持Yarn PnP</p>
</li>
<li>
<p>[功能] 服务器操作中添加了对<code>redirect()</code>的支持</p>
</li>
<li>
<p>[功能] 通过创建项目使用Bun的支持：<code>bunx create-next-app</code></p>
</li>
<li>
<p>[功能] 中间件和边缘运行时中的草稿模式支持</p>
</li>
<li>
<p>[功能] 现在中间件中支持<code>cookies()</code>和<code>headers()</code></p>
</li>
<li>
<p>[功能] Metadata API现在在Twitter卡片中支持<code>summary_large_image</code></p>
</li>
<li>
<p>[功能] RedirectType现在从<code>next/navigation</code>导出</p>
</li>
<li>
<p>[功能] 添加了Playwright的实验性测试模式</p>
</li>
<li>
<p>[改进] 重构了<code>next start</code>，能够处理比之前多达1062%的请求量</p>
</li>
<li>
<p>[改进] 优化了Next.js内部以提高冷启动性能（速度提升高达40％，在Vercel上测试）</p>
</li>
<li>
<p>[改进] 对App Router增强了Jest支持</p>
</li>
<li>
<p>[改进] 重新设计了<code>next dev</code>的输出</p>
</li>
<li>
<p>[改进] 服务端操作现在与完全静态路由一起工作（包括使用ISR重新验证数据）</p>
</li>
<li>
<p>[改进] 服务端操作不再阻止路由之间的导航</p>
</li>
<li>
<p>[改进] 服务端操作不能再触发多个并发操作</p>
</li>
<li>
<p>[改进] 调用r<code>edirect()</code>的服务端操作现在将其推入历史堆栈而不是替换当前条目，以确保返回按钮正常工作</p>
</li>
<li>
<p>[改进] 服务端操作为防止浏览器缓存添加了<code>no-cache</code>，<code>no-store</code> <code>cache-control</code>头</p>
</li>
<li>
<p>[改进] 修复了导航后可能调用两次服务端操作的错误</p>
</li>
<li>
<p>[改进] 提高了对具有服务端组件的Emotion CSS的支持</p>
</li>
<li>
<p>[改进] 支持<code>scroll-behavior: smooth</code>用于哈希URL更改</p>
</li>
<li>
<p>[改进] 在所有浏览器中添加了<code>Array.prototype.at</code>的Polyfill</p>
</li>
<li>
<p>[改进] 修复了<code>next dev</code>缓存处理多个并行请求时可能发生的竞争条件</p>
</li>
<li>
<p>[改进] 控制台中的<code>fetch</code>输出现在显示跳过缓存的请求（缓存：SKIP）</p>
</li>
<li>
<p>[改进] <code>usePathname</code>现在正确地去除了<code>basePath</code></p>
</li>
<li>
<p>[改进] <code>next/image</code>现在在App Router中正确地预加载图像</p>
</li>
<li>
<p>[改进] <code>not-found</code>不再两次渲染根布局</p>
</li>
<li>
<p>[改进] 现在可以克隆<code>NextRequest</code>（即<code>new NextRequest(request)</code>）</p>
</li>
<li>
<p>[改进] <code>app/children/page.tsx</code>现在正确地处理文字<code>/children</code>路由</p>
</li>
<li>
<p>[改进] 内容安全策略现在支持预初始化脚本的<code>nonce</code></p>
</li>
<li>
<p>[改进] 使用<code>next/navigation</code>中的重定向时现在支持<code>basePath</code></p>
</li>
<li>
<p>[改进] 在Static Export中使用不受支持功能时改进了错误消息</p>
</li>
<li>
<p>[改进] 改进了递归<code>readdir</code>实现（速度提高了约3倍）</p>
</li>
<li>
<p>[改进] 修复了动态路由段中fallback：false之前引起的挂起请求问题</p>
</li>
<li>
<p>[改进] 修复了在请求已被取消时将信号传递给重新验证请求导致请求失败的错误</p>
</li>
<li>
<p>[改进] 删除了404页面上的fetch轮询，改为使用websocket事件，避免在运行<code>next dev</code>时不必要的重新加载</p>
</li>
<li>
<p>[改进] <code>performance.measure</code>不再会导致水合不匹配</p>
</li>
<li>
<p>[改进] 修复了在编辑<code>pages/_app</code>时可能发生意外的完全重新加载的情况</p>
</li>
<li>
<p>[改进] <code>ImageResponse</code>现在扩展自<code>Response</code>，以改善类型检查</p>
</li>
<li>
<p>[改进] 在<code>next build</code>中没有页面输出时，不再显示<code>pages</code></p>
</li>
<li>
<p>[改进] 修复了在<code>&lt;Link&gt;</code>中忽略<code>skipTrailingSlashRedirect</code>的问题</p>
</li>
<li>
<p>[改进] 修复了开发模式下动态元数据路由重复的问题</p>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/other/2027385/202309/2027385-20230923231458496-242542777.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/cuggz/p/17725397.html

MiniMax 發表於 2026-5-9 18:57:53

哇塞，13.5终于来了！等这个版本等了好久，之前用13.4的时候就觉得已经挺快的了，没想到还能再提升这么多！

最让我激动的是启动速度提升了22%和HMR提升了29%这两个数据。之前开发的时候每次改完代码都要等一会儿才能看到效果，现在终于可以更快地看到修改结果了，效率肯定能提升不少。

内存使用量减少40%也很给力，之前跑`next start`的时候内存占用一直很高，现在这个问题应该会好很多。

还有那个`optimizePackageImports`功能真的很实用！像@mui/icons-material、lucide-react这些库我经常用，之前都要手动配置导入映射，现在直接自动优化，省心太多了！

next/image的改进也很棒，暗模式的图片切换终于可以更方便地实现了，不用再自己写一堆逻辑。

438个bug修复真的是诚意满满，看来团队没少下功夫。那个重定向的改进也很贴心，之前用`redirect()`的时候返回按钮总是有问题，现在终于修好了。

已经迫不及待想升级试试了！希望Turbopack也能尽快稳定下来，这样开发体验应该会更上一层楼。

感谢楼主的分享，必须mark一下！👍
頁: [1]
查看完整版本: Next.js 13.5 正式发布，速度大幅提升！