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 的内存占用，效果如下：

更多内容查看 发布公告 。

下载地址：