likes
comments
collection
share

Next.js 13.5

作者站长头像
站长
· 阅读数 17

Next.js 13.5 通过以下方式提高了本地开发性能和可靠性：

  • 本地服务器启动速度提高 22%： 使用 App & Pages Router 加快迭代速度
  • HMR（快速刷新）速度提高 29%： 保存更改时迭代速度更快
  • 内存使用量减少 40%： 运行时测量next start
  • 优化的包导入： 使用流行的图标和组件库时更新速度更快
  • next/image改进：  <picture>、艺术指导和深色模式支持
  • 并修复了超过 438 个错误！

立即升级并注册Next.js Conf10 月 26 日：

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

改善启动和快速刷新时间

我们很高兴看到 App Router 的持续采用，在查看HTTP Archive抓取的前 1000 万个源时，现在环比增长了 80% 。

Next.js 13.5

自 Next.js 13.4 以来，我们的重点一直是提高 App Router 应用程序的性能和可靠性。比较 13.4 和 13.5，我们发现新应用程序有以下改进：

  • ****本地服务器启动速度提高 22%
  • ****HMR（快速刷新）速度提高 29%
  • ****内存使用量减少 40%

我们能够通过以下优化实现性能提升：

  • 通过缓存或最小化缓慢操作来减少工作量
  • 优化昂贵的文件系统操作
  • 编译期间更好的增量树遍历
  • 将不必要的阻塞同步调用改为惰性调用
  • 自动配置大图标库

Next.js 用户 Lattice 报告在他们的测试中编译速度提高了 87-92%。

在我们继续迭代和改进当前捆绑器性能的同时，我们还在开发 Turbopack（测试版）同时进一步提高性能。13.5next dev --turbo现在支持更多功能。

优化包导入

当使用大型图标或组件库或重新导出数百或数千个模块的其他依赖项时，我们在优化包导入方面取得了令人兴奋的突破，提高了本地开发性能和生产冷启动。

之前，我们添加了对 modularizeImports 的支持，使您能够配置在使用这些库时应如何解析导入。在 13.5 中，我们用 optimizePackageImports 取代了此选项，它不需要您指定导入的映射，而是会自动为您优化导入。

@mui/icons-material、 、@mui/material、date-fns、lodash、lodash-es、ramda、react-bootstrap、@headlessui/react、@heroicons/react和 lucide-react 等库现在会自动优化，仅加载您实际使用的模块，同时仍然为您提供使用import许多命名导出编写语句的便利。

查看公告或在我们的文档中了解更多optimizePackageImports 信息。

next/image改进

根据社区反馈，我们添加了新的实验性功能unstable_getImgProps()来支持高级用例，而无需<Image>直接使用组件，包括：

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 (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

此外，该placeholder道具现在支持提供任意data:image/不应该模糊的占位符图像（演示）。

在我们的文档中了解更多信息next/image。

其他改进

自 以来13.4.0，我们已修复了超过 438 个错误并进行了各种改进，包括：

  • [文档]有关表单和突变的新文档
  • [文档]有关服务器和客户端组件的新文档
  • [文档]有关内容安全策略和随机数的新文档
  • [文档]有关缓存和重新验证的新文档
  • [功能]  useParams从现在useSearchParams开始next/navigation在 Pages Router 中工作以实现增量采用
  • [功能] 支持scroll: false：在 router.push / router.replace 上为 false
  • [功能] 支持scroll={false}onnext/link
  • [功能] HTTPS支持开发：next dev --experimental-https
  • [功能] 添加了对cookies().has()（文档）的支持
  • [功能] 添加了对 IPv6 主机名的支持
  • [功能] 通过 App Router 添加了对 Yarn PnP 的支持
  • [功能] redirect()添加了对服务器操作的支持
  • [功能] 添加了对使用 Bun 来创建项目的支持bunx create-next-app：(文档)
  • [功能] 草稿模式支持在中间件和 Edge Runtime 内部使用
  • [功能]  cookies()现在headers()在中间件内部支持
  • [功能] summary_large_image Twitter 卡片现在支持元数据 API
  • [功能]  RedirectType现已导出自next/navigation
  • [功能] 添加了 Playwright 的实验测试模式（文档）
  • [改进] 重构，next start每秒处理的请求数增加 1062%
  • [改进] 优化 Next.js 内部结构以改进冷启动（速度提高 40%，在 Vercel 上测试）
  • [改进] 更好地支持 App Router ( PR）
  • [改进] 重新设计next dev输出（PR）
  • [改进] 服务器操作现在可以使用完全静态路由（包括使用 ISR 重新验证数据）
  • [改进] 服务器操作不再阻止路由之间的导航
  • [改进] 服务器操作不再可以触发多个并发操作
  • [改进] 服务器操作调用redirect()现在推送到历史堆栈中，而不是替换当前条目，以确保后退按钮正常工作
  • [改进] 服务器操作添加no-cache, no-store cache-control标头以防止浏览器缓存
  • [改进] 修复了导航后可以调用服务器操作两次的错误
  • [改进] 改进了对带有服务器组件的 Emotion CSS 的支持
  • [改进] 支持scroll-behavior: smoothhash url 更改
  • [改进] 在所有浏览器中添加了Array.prototype.atpolyfill
  • [改进] next dev修复了处理多个并行请求时缓存中的竞争条件
  • [改进]  控制台中的获取输出现在显示使用缓存跳过缓存的请求：SKIP
  • [改进]  usePathname现在可以正确剥离basePath
  • [改进]  next/image现在可以在 App Router 中正确预加载图像
  • [改进]  not-found不再渲染根布局两次
  • [改进]  NextRequest现在可以克隆（即new NextRequest(request)）
  • [改进]  app/children/page.tsx现在可以正常工作于文字/children路由
  • [改进] 内容安全策略现在支持预初始化脚本的随机数
  • [改进] redirect现在使用next/navigation支持basePath
  • [改进] 修复了在process.env模式下渲染时output: 'standalone'不可用的问题
  • [改进] 改进了使用具有不支持功能的静态导出时的错误消息
  • [改进] 改进了递归 readdir 实现（速度提高约 3 倍）
  • [改进] 修复了fallback: false之前导致挂起请求的动态路由段
  • [改进] 修复了传递给重新验证请求的错误signal，导致请求已中止时失败
  • [改进] 删除了fetch404 页面上的轮询以支持 websocket 事件，防止运行时不必要的重新加载next dev
  • [改进]  performance.measure不再会导致水合作用不匹配
  • [改进] 修复了编辑pages/_app时可能发生意外完全重新加载的情况
  • [改进]  ImageResponse现在扩展了Response改进的类型检查（PR）
  • [改进] 下次构建没有页面输出时不再显示页面
  • [改进] 修复了<Link>中被忽略的skipTrailingSlashRedirect问题
  • [改进] 修复了开发模式下重复的动态元数据路由