关于前端:Nextjs-135-正式发布速度大幅提升

5次阅读

共计 3475 个字符，预计需要花费 9 分钟才能阅读完成。

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 和 l ucide-react等库当初都能够主动优化，只加载理论应用的模块，同时不便编写带有很多命名导出的导入语句。

基于社区的反馈，此版本增加了一个新的实验性函数 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/ 作为占位图像，这些图像不会被含糊解决。

自从 13.4.0 版本以来，我修复了超过 438 个谬误，并进行了各种改良，包含：