Next.js 13.5 正式发布，速度大幅提升！-Toy模板网

这篇具有很好参考价值的文章主要介绍了Next.js 13.5 正式发布，速度大幅提升！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

9 月 19 日，Next.js 13.5 正式发布，该版本通过以下方式提高了本地开发性能和可靠性：

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

改善启动和快速刷新时间

App Router 的采用在持续增加，根据 HTTP Archive 对前1000万个网站进行的统计数据来看，其增长速度达到了每月 80%。

image.png

自 Next.js 13.4 版本以来，Next.js 团队的重点一直是改进 App Router 应用的性能和可靠性。将13.4与13.5版本进行比较，在一个新的应用上，可以看到以下改进：

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

通过以下优化方法实现了这种性能提升：

通过缓存或减少慢速操作来减少工作量
优化昂贵的文件系统操作
在编译过程中实现更好的增量树遍历
将不必要的阻塞同步调用改为懒加载
自动配置大型图标库

Next.js 用户 Hanford 在他们的测试中报告了其编译速度提升 87-92%！

image.png

在继续迭代和改进当前打包工具性能的同时，Next.js 团队还在开发 Turbopack（beta）以进一步提高性能。在13.5版本中，next 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等库现在都可以自动优化，只加载实际使用的模块，同时方便编写带有很多命名导出的导入语句。

next/image 改进

基于社区的反馈，此版本添加了一个新的实验性函数unstable_getImgProps()，以支持不直接使用<Image>组件的高级用例，包括：

处理background-image或image-set
使用canvas的context.drawImage()或new Image()时进行操作
使用<picture>媒体查询来实现艺术方向或明/暗模式图片
利用<picture>元素的媒体查询功能，实现明/暗模式图片的切换。

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/作为占位图像，这些图像不会被模糊处理。