<返回更多

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

2023-09-20     前端充电宝
加入收藏

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

改善启动和快速刷新时间

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

图片

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

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

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

在继续迭代和改进当前打包工具性能的同时，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>组件的高级用例，包括：


 
 
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个错误，并进行了各种改进，包括：

关键词：Next.js      点击(2)
声明：本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系，我们将立即删除或处理。
▍相关推荐
更多Next.js相关>>>
Copyright @ 简易百科 V 2.0 京ICP备14042104号