在经过26次金丝雀发布和万次下载之后,近日,我们正式发布了Next.js7.0,新功能包括:
DX改进:启动速度提高57%,重新编译速度提高42%;
使用react-error-overlay更好地报告错误;
编译管道升级:Webpack4和Babel7;
标准化的动态导入;
静态CDN支持;
较小的初始HTML载荷;
App和Page之间的ReactContext(服务器端渲染)。
DX改进Next.js的主要目标之一是提供最佳的性能和开发者体验。最新版本为构建和调试管道带来了很多重大改进。
得益于Webpack4和Babel7,以及我们对代码库做出的很多改进和优化,Next.js现在在开发过程中的启动速度提高了57%。
我们新增了增量编译缓存,让变更代码的构建速度快了40%。
以下是我们收集的一些示例数据:
因为使用了webpackbar,在开发和构建的同时可以看到更好的实时反馈:
使用react-error-overlay更好地报告错误准确地渲染错误对于良好的开发和调试体验来说是至关重要的。到目前为止,我们可以渲染错误消息和堆栈跟踪信息。我们在此基础上更进一步,我们使用react-error-overlay来丰富堆栈跟踪信息:
准确的服务器端和客户端错误位置;
高亮显示错误来源;
完整的堆栈跟踪信息。
这是之前和之后的错误显示比较:
另外,借助react-error-overlay,你只需单击特定代码块就可以轻松打开文本编辑器。
支持Webpack4从发布第一个版本以来,Next.js一直使用Webpack来打包代码和重用丰富的插件。Next.js现在使用了最新的Webpack4,其中包含很多改进和bug修复。
支持.mjs源文件;
代码拆分改进;
更好的摇树优化(删除未使用的代码)支持。
另一个新功能是支持WebAssembly,Next.js甚至可以进行WebAssembly服务器渲染。
这里有一个例子: