Next.js 7 发布,重新编译速度提高 42%

Next.js 7.0.0 发布了,Next.js 是一个用于在服务端渲染 React 应用程序的简单框架。

主要更新包括:

  • DX 改进:启动速度提高 57%,重新编译速度提高 42%

  • 使用 react-error-overlay 更好地报告错误

  • 升级的编译管道:Webpack 4 和 Babel 7

  • 标准化动态 import

  • 静态 CDN 支持

  • 更小的初始 HTML 有效负载

  • 应用程序和页面之间的 React Context

DX 改进

此版本为构建和调试管道带来了许多重大改进,Webpack 4、Babel 7 与其它改进、优化,使得 Next.js 现在在开发过程中的启动速度提高了 57%,同时由于新的增量编译缓存,重新编译代码的速度提高了 42%,下边是收集的测试数据:

同时,现在可以通过 webpackbar 看到更好的实时反馈:

使用 react-error-overlay 更好地报告错误。目前 Next 会显示错误消息及其堆栈跟踪,但是此次更新更进一步,使用 react-error-overlay 功能丰富了堆栈跟踪,如下所示:

在使用 react-error-overlay 时只需单击特定代码块即可轻松打开文本编辑器。

Webpack 4

自第一版发布以来,Next.js 一直由 Webpack 提供支持,用于打包代码并重新使用丰富的插件和扩展生态系统。新版本 Next.js 由 Webpack 4提供支持,其中包含许多改进和 bug 修复,包括:

  • 支持 .mjs 源文件

  • 代码拆分改进

  • 更好的 tree-shaking(删除未使用的代码)支持

此外还有 WebAssembly 支持,Next.js 甚至可以服务器端渲染 WebAssembly

使用 Webpack 4,引入了一种从 bundle 中提取 CSS 的新方法 mini-extract-css-plugin,zeit/next-css、@ zeit/next-less、@ zeit/next-sass 和 @ zeit/next-stylus 现在由 mini-extract-css-plugin 提供支持。

从版本 3 开始,Next.js 通过 next/dynamic 支持动态导入,作为这项技术的早期采用者,必须编写自己的解决方案来处理 import(),因此,Next.js 开始偏离 Webpack 后来为其引入的支持,并且缺少某些功能,也就是 Next.js 不支持 Webpack 之后引入的一些 import() 功能。从 Next.js 7 开始,不再触及默认的 import() 行为。

更小的初始 HTML 有效负载

此前初始有效载荷约为 1.62kB,Next.js 7 中进行了优化,现在为 1.5kB,减少了 7.4%,使页面更加精简,下边是测试数据:

静态 CDN 支持

在 Next.js 5 中引入了 assetPrefix 支持,这是一种使 Next.js 自动从某个位置(通常是 CDN)加载资源的方法,Next.js 7 中,更改了 .next 的目录结构以匹配 url 结构:

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// mapped to:
.next/static/<buildid>/pages/index.js

支持应用程序和页面之间的 React Context

从 Next.js 7 开始,支持 pages/_app.js 和页面组件之间的新 React context API。以前,无法在服务器端的页面之间使用 React context,原因是 Webpack 保留了内部模块缓存而不是使用 require.cache,Next.js 7 中编写了一个自定义 Webpack 插件来改变这种行为以在页面之间共享模块实例。这样做不仅允许使用新的 React context,还可以在页面之间共享代码时减少 Next.js 的内存占用,效果如下:

更多内容查看发布公告

下载地址:

未经允许不得转载:八九社区 » Next.js 7 发布,重新编译速度提高 42%

分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册