跳到内容
返回博客

星期三，2021 年 4 月 28 日

Next.js 10.2

作者
Connor Davis
Connor Davis@connordav_is
JJ Kasper
JJ Kasper@_ijjk
Shu Ding
Shu Ding@shuding_
Tim Neutkens
Tim Neutkens@timneutkens
Tobias Koppers
Tobias Koppers@wSokra

我们很高兴推出 Next.js 10.2，新特性包括

立即更新，运行 npm i next@latest。

Webpack 5

在 Next.js 10.1 中，我们改进了 快速刷新 并缩短了安装时间。我们很高兴分享通过 webpack 5 实现的额外性能改进。

今天，我们将 webpack 5 的推广范围扩展到 Next.js 应用程序。从 Next.js 10.2 开始，所有在其 next.config.js 中不使用自定义 webpack 配置的应用程序将自动使用 webpack 5。

启用 webpack 5 后，您将自动获得新功能和改进，例如

  • 改进的磁盘缓存： 磁盘缓存允许编译器在 next build 运行之间持久化工作。只有更改的文件会被重新编译，从而提高性能。 Vercel 客户 Scale 观察到后续构建速度提升了 63%。
  • 改进的快速刷新： Next.js 现在优先处理与快速刷新相关的编译，从而使每次刷新速度加快 100 毫秒到 200 毫秒。
  • 改进的资产长期缓存： 多个 next build 运行之间的输出现在是确定性的，从而改善了生产环境中 JavaScript 资产的浏览器缓存。当页面内容没有更改时，哈希值保持不变。
  • 改进的 Tree Shaking： CommonJS 模块现在可以进行 tree shaking，以自动删除未使用的代码。静态分析用于确定无副作用的模块。 export * 跟踪更多信息，不再将默认导出标记为已使用。还启用了模块内 tree-shaking，允许仅在未使用的导出中使用的导入进行 tree shaking。

我们努力确保从 webpack 4 到 5 的平滑过渡。Next.js 核心测试套件包含超过 3,400 个集成测试，并在每个启用 webpack 5 支持的 pull request 上运行。

如果您的应用程序具有自定义 webpack 配置，我们建议按照文档启用 webpack 5。在 Next.js 中升级到 webpack 5 后，请与我们分享您的反馈。

改进的启动性能

我们改进了 Next.js CLI 初始化，使 next dev 的启动时间在首次运行后最多快 24%。例如，vercel.com 的 next dev 从 3.3 秒缩短到 2.5 秒。

我们的目标是使您的本地开发体验达到实时（快 20 倍）。请继续关注即将发布的版本中额外的启动性能改进。

可访问性改进

默认情况下，路由更改现在会向屏幕阅读器和其他辅助技术宣布。

下面的示例展示了在客户端导航时，macOS VoiceOver 宣布标题 “Real Data. Real Performance”。页面名称首先查找 <h1> 元素，然后回退到 document.title，最后回退到路径名。

路由更改现在会自动宣布。

感谢 Kyle Boss 和 Kitty Giraudel 帮助实现此功能。

基于标头和查询字符串参数的路由

Next.js 的 rewrites、redirects 和 headers 现在支持新的 has 属性，允许您匹配传入的标头、cookie 和查询字符串。

Vercel 客户 Joyn 使用 has 来优化内容，以提高可发现性和性能。例如，您可以根据 User-Agent 重定向旧浏览器

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

另一个示例可能是根据用户的位置重定向用户

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

最后，如果用户已登录，您可以进行重定向

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

要了解更多信息并探索其他示例，请查看重定向文档。

自动 Web 字体优化

桌面版网页中有 82% 使用了 Web 字体。自定义字体对于您网站的品牌、设计和跨浏览器/设备一致性非常重要。但是，使用 Web 字体不应以牺牲性能为代价。

Next.js 现在在使用 Web 字体时支持自动 Web 字体优化。默认情况下，Next.js 将在构建时自动内联字体 CSS，从而消除获取字体声明的额外往返。这可以改善首次内容绘制 (FCP) 和最大内容绘制 (LCP)。例如

// Before
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

自动 Web 字体优化目前支持 Google 字体，我们正在努力将支持扩展到其他字体提供商。我们还计划添加对加载策略 和 font-display 值的控制。通过默认优化字体，我们能够帮助开发人员交付更快的网站，并在无需额外努力的情况下改善其 Core Web Vitals。

感谢我们在 Google 和 Janicklas Ralph 的合作伙伴帮助实现此功能。

团队壮大

我们很高兴宣布 webpack 的作者 Tobias Koppers 已加入 Vercel 的 Next.js 团队。

社区

我们感谢我们的社区，包括所有帮助塑造此版本的外部反馈和贡献。

此版本由以下人员贡献：@rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18, and @jarrodwatts。