Next.js 在 8 月 12 号发布了 11.1 版本,在前端圈子里引起了不小的动荡,我总结了两点原因:
先来看看联合作者,豪华的阵容:
其中 DongYong Kang 是最近很火的基于 Rust 的编译框架 SWC 的作者,97 年出生的韩国小哥。
而 Maia Teegarden 是 Parcel 的贡献者之一。
在这些巨佬的加持下,Next.js 11.1 带来了很多让人振奋的新改进:
keep-alive
特性加持来获得。next/image
优化: 可选的 Sharp 用法, 对 next export
的支持更好。接下来,咱一起看看本次更新的新闻稿内容 :
Next.js 团队与安全研究人员和审计人员合作来防止漏洞。我们感谢来自 Robinhood 的 Gabriel Benmergui,他们调查并发现了一个使用 pages/_error.js
的打开重定向风险,并随后负责任的进行报告。
好在报告的问题没有直接伤害到用户,但它存在被钓鱼攻击从信任域重定向到攻击者的域的风险。我们在 Next.js 11.1 中安装了一个补丁,以防止这种问题的发生,我们也做好了安全回归测试。
欲了解更多详情,请阅读公开的 CVE。我们建议升级到 Next.js 的最新版本,以提高应用程序的整体安全性。如需跟进日后的报告信息,请发送电子邮件至 security@vercel.com。
注意:托管在 Vercel 上的 Next.js 应用程序不受此漏洞的影响(因此,在 Vercel 上运行的 Next.js 应用程序不需要执行任何操作。)
我们致力于 Next.js 中广泛的 ES Modules 支持,作为引入模块或者输出目标的支持都在完善。从 Next.js 11.1 起,你可以通过开启实验性标志,用 ES Modules 引入 npm 包(例如 package.json
中的 "type": "module"
)
// next.config.js
module.exports = {
// Prefer loading of ES Modules over CommonJS
experimental: { esmExternals: true },
};
ES Modules 的支持也向后兼容,以支持传统的 CommonJS 导入行为。在 Next.js 12 中,esmExternals: true
会成为默认选项,我们强烈建议尝试这个新选项,并且在 Github Discussions 留下反馈一起讨论如何改进。
我们正在集成 SWC,这是一个基于 Rust 的超级快的 JavaScript 和 TypeScript 的编译器,它可以替代 Next.js 里的两条工具链:编译独立文件的 Babel 和压缩产物的 Terser。
作为用 SWC 取代 Babel 的一部分,我们正在将 Next.js 用到的所有自定义代码转换,移植到用 Rust 编写的 SWC 代码转换,最大限度的提升性能。例如,在 getStaticProps
、getStaticPaths
和getServerSideProps
中 tree shaking 掉未使用的代码。
在早期的测试中,以前使用 Babel 的代码转换从 500ms
下降到 10ms
,代码压缩从250ms
下降到 30ms
。总的来说,比以前快两倍。
我们很高兴地宣布,SWC的创建者 DongYoon Kang 和Parcel的贡献者Maia Teegarden 已经加入了 Vercel 的 Next.js 团队,致力于改善next dev
和next build
的性能。当 SWC 稳定后,我们将在下一个版本中分享更多关于 SWC 集成的结果。
当你使用next build
且发送大量 HTTP 请求时,我们的性能平均提高了2 倍。例如,如果你使用getStaticProps
和 getStaticPaths
从 Headless CMS 获取内容,那么你会看到明显更快的构建。
Next.js 自动 polyfill 了 node-fetch
,现在默认启用HTTP Keep-Alive。根据 external benchmarks,这将使预渲染速度快2 倍。
要对某些fetch()
调用禁用 HTTP Keep-Alive,可以添加 agent
选项:
import { Agent } from "https";
const url = "<https://example.com>";
const agent = new Agent({ keepAlive: false });
fetch(url, { agent });
要全局覆盖所有fetch()
调用,可以使用next.config.js
:
module.exports = {
httpAgentOptions: {
keepAlive: false,
},
};
基于 Webpack 对 Assets 和 SourceMap 处理的优化,在 Next.js 中 SourceMap 现在可以减少约70%的性能消耗和约67%的内存消耗。
这只会影响在 next.config.js
文件中开启 productionBrowserSourceMaps: true
的 Next.js 应用程序。在 Next.js 11.1 中,当启用 SourceMap 时,构建时间仅仅增加了 11%。
我们还与 Sentry 合作,通过 Sentry Next.js plugin 来提高上传 SourceMap 的性能。
在 Next.js 11 中,我们通过next lint
引入了内置的 ESLint 支持。自最初发布以来,我们一直在持续添加 rules,帮助开发人员修复应用程序中的常见错误。
现在默认情况下包含了更好的可访问性规则,防止 ARIA 属性之间不匹配,或者是使用不存在的 ARIA 属性的问题。默认情况下,这些规则将是 warn 级别。
特别感谢社区贡献者 JeffersonBledsoe 添加了这些规则。
对于getStaticProps
、getStaticPaths
和getServerSideProps
中的常见拼写错误,默认情况下将会检测到并且发出警告。这有助于解决由于一个小的输入错误,导致无法调用数据获取的情况。例如,getstaticprops
或getstaticprops
会被检测并警告。
特别感谢社区贡献者kaykdm创建了这个规则。
next/image
优化我们一直在收集关于next/image
和内置的图片优化的社区反馈,很高兴可以分享对性能、开发体验和用户体验的众多改进。
默认情况下,Next.js 使用 WebAssembly 来执行 Image Optimization,这抵消了 Next.js 包的安装时间,因为它非常小,而且没有 post-install 的步骤。在 Next.js 11.1 中,你可以选择性的安装sharp
,它优化了非缓存图片生成时间,同时也降低了安装速度。
基于 WebAssembly 的图像优化器已经更新,以支持 ARM 芯片,比如如使用 Node.js 16 的 Apple M1。
内置图像优化器现在根据响应主体的内容自动检测外部图像内容类型。这允许 Next.js 在优化托管在 AWS S3 且响应头为Content-Type: application/octet-stream
的图像。
在 next dev
静态图片引入,且写明了placeholder="blur"
属性时,这些图片会自动开启懒生成,当引入很多静态图片时,可以优化开发服务器的启动速度。
import Image from "next/image";
import author from "../public/me.png";
export default function Home() {
return (
// The placeholder for this image is lazy-generated during development
<Image src={author} alt="Picture of the author" placeholder="blur" />
);
}
next export
支持自定义图像加载器:next/image
现在在 next export
时支持 第三方图像优化服务。当你想提供 自定义 loader 属性
给 next/image
时,你可以在 next.config.js
中配置 images.loader: "custom"
。next/image
中添加了一个新的属性onLoadingComplete
。这允许注册一个在图像完全加载后的回调函数。images.minimumCacheTTL
来更改默认的缓存 TTL。如果可能的话,我们建议使用静态图片导入,,因为 URL 中包含图像 hash 值,所以静态图片导入会自动使用最大 TTL。新闻稿地址:https://nextjs.org/blog/next-11-1#other-image-improvements
翻译 / 润色:ssh, 字节跳动 Web Infra APM 团队成员,内推欢迎联系微信 sshsunlight
Next.js 是社区 1700 多位独立开发者、谷歌和 Facebook 等行业合作伙伴,以及我们的核心团队共同努力的结果。
我们很自豪地看到这个社区持续发展。仅在过去的 6 个月里,我们就看到 Next.js 在 NPM 上的下载量增长了 50%,从 410 万次增长到 620 万次,在 Alexa 排名前 1 万的网站中使用 Next.js 的主页数量也增长了 50%。
登录 后才可以发表评论