Next.js支持Webpack 5以提高构建速度

645 阅读2分钟

Next.js 10.2扩大了Webpack 5的使用范围,改善了磁盘缓存、快速刷新和树状晃动。升级还改善了启动性能。

Vercel公司用于构建React网络应用的Next.js框架的最新升级,通过扩大使用Webpack 5模块捆绑器,加快了构建和刷新速度。

4月28日推出的Next.js 10.2使用Webpack 5来改进磁盘缓存,允许编译器在构建运行之间持续工作。因为只有修改过的文件才会被重新编译,所以后续构建的性能得到了极大的提高,最高可达63%。

在Next.js 10.2中,所有没有在next config.js 中使用自定义webpack配置的应用程序将自动使用Webpack 5。Webpack 5的好处还包括更好的快速刷新和改进的长期资产缓存。另外,CommonJS现在可以通过树形摇动来自动删除未使用的代码。

Next.js 10.2的其他改进包括:

  • 通过更好的Next.js初始化,启动性能得到了改善。
  • 头信息、重写和重定向现在支持has 属性,以便与传入的cookies、头信息和查询字符串相匹配。
  • 现在支持自动网页字体优化,Next.js默认在构建时自动内联CSS,消除了获取字体声明的额外往返。这导致了对First Contentful Paint(FCP)和Largest Contentful Paint(LCP)的改进。自动网页字体优化现在支持谷歌字体,并计划将支持范围扩大到其他字体供应商。还计划增加对加载策略和font-display 值的控制。通过默认优化字体,开发者将能够更快速地发布网站,并改善核心网络生命力
  • 对于可访问性,现在的路线变化会默认宣布给屏幕阅读器和其他辅助技术。

Next.js的用户可以通过运行npm i next@latest 更新到10.2版本。