跳到内容
返回博客

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 支持运行。

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

改进的启动性能

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

我们的使命是使您的本地开发体验达到实时 (速度提升 20 倍)。敬请期待未来版本中启动性能的更多改进。

可访问性改进

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

以下示例显示了在客户端导航时，macOS VoiceOver 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,
      },
    ];
  },
};

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

自动 Webfont 优化

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

Next.js 现在在使用 Web 字体时支持自动 Webfont 优化。默认情况下，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>

自动 Webfont 优化目前支持 Google Fonts，我们正在努力将支持进一步扩展到其他字体提供商。我们还计划添加对加载策略和 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 和 @jarrodwatts。