Next.js 7.0正式发布：重新编译速度提高42％，支持WebAssembly

Myth丶恋晨 2022-02-22 12:48 295阅读 0赞

在经过26次金丝雀发布和340万次下载之后，现在，我们正式推出生产就绪的Next.js 7。

\\\\

*  DX改进：启动速度提高57％，重新编译速度提高42％；\\\\t
 *  使用react-error-overlay更好地报告错误；\\\\t
 *  编译管道升级：Webpack 4和Babel 7；\\\\t
 *  标准化的动态导入；\\\\t
 *  静态CDN支持；\\\\t
 *  较小的初始HTML载荷；\\\\t
 *  App和Page之间的React Context（服务器端渲染）。\\

## DX改进 ##

\\\\

Next.js的主要目标之一是提供最佳的性能和开发者体验。最新版本为构建和调试管道带来了很多重大改进。

\\\\

得益于Webpack 4和Babel 7，以及我们对代码库做出的很多改进和优化，Next.js现在在开发过程中的启动速度提高了57％。

\\\\

我们新增了增量编译缓存，让变更代码的构建速度快了40％。

\\\\

以下是我们收集的一些示例数据：

\\\\

![152910e3babfe6e3bcbc01f4c883e467.jpg][]

\\\\

因为使用了webpackbar，在开发和构建的同时可以看到更好的实时反馈：

\\\\

![173b40b40dd7b2bfc99ed2c3d42d21e7.gif][]

\\\\

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

\\\\

准确地渲染错误对于良好的开发和调试体验来说是至关重要的。到目前为止，我们可以渲染错误消息和堆栈跟踪信息。我们在此基础上更进一步，我们使用react-error-overlay来丰富堆栈跟踪信息：

\\\\

*  准确的服务器端和客户端错误位置；\\\\t
 *  高亮显示错误来源；\\\\t
 *  完整的堆栈跟踪信息。\\

这是之前和之后的错误显示比较：

\\\\

![5133da9264cccc4a986b58f38984489d.png][]

\\\\

另外，借助react-error-overlay，你只需单击特定代码块就可以轻松打开文本编辑器。

\\\\

## Webpack 4 ##

\\\\

从发布第一个版本以来，Next.js一直使用Webpack来打包代码和重用丰富的插件。Next.js现在使用了最新的Webpack 4，其中包含很多改进和bug修复。

\\\\

*  支持.mjs源文件；\\\\t
 *  代码拆分改进；\\\\t
 *  更好的摇树优化（删除未使用的代码）支持。\\

另一个新功能是支持WebAssembly，Next.js甚至可以进行WebAssembly服务器渲染，这里有一个例子。

\\\\

## CSS导入 ##

\\\\

因为使用了Webpack 4，我们引入了一种从捆绑包中提取CSS的新方法，这个插件叫作mini-extract-css-plugin。

\\\\

mini-extract-css-plugin提供了@zeit/next-css、@zeit/next-less、@zeit/next-sass和@zeit/next-stylus。

\\\\

这些Next.js插件的新版本解决了与CSS导入相关的20个问题，例如，现在支持import()动态导入CSS：

\\\\

\// components/my-dynamic-component.js\import './my-dynamic-component.css'\export default () =\u0026gt; \u0026lt;h1\u0026gt;My dynamic component\u0026lt;/h1\u0026gt;

\\\\

\// pages/index.js\import dynamic from 'next/dynamic'\const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))\export default () =\u0026gt; \u0026lt;div\u0026gt;\  \u0026lt;MyDynamicComponent/\u0026gt;\\u0026lt;/div\u0026gt;

\\\\

一个重大改进是现在不再需要在pages/\_document.js中添加以下内容：

\\\\

\\u0026lt;link rel=\"stylesheet\" href=\"/_next/static/style.css\" /\u0026gt;

\\\\

Next.js会自动注入这个CSS文件。在生产环境中，Next.js还会自动向CSS URL中添加内容哈希，当文件发生变更时，最终用户就不会得到旧文件，并且能够获得不可变的永久缓存。

\\\\

简而言之，要在Next.js项目中支持导入.css文件，只需要在next.config.js中注册withCSS插件：

\\\\

\const withCSS = require('@zeit/next-css')\module.exports = withCSS({/* my next config */})

\\\\

## 标准化动态导入 ##

\\\\

从版本3开始，Next.js就通过next/dynamic来支持动态导入。

\\\\

作为这项技术的早期采用者，我们必须自己编写解决方案来处理import()。

\\\\

因此，Next.js逐渐缺失Webpack后来引入的一些功能，包括import()。

\\\\

例如，无法手动命名和捆绑某些文件：

\\\\

\import(/* webpackChunkName: 'my-chunk' */ '../lib/my-library')

\\\\

另一个例子是在next/dyanmic模块之外使用import()。

\\\\

从Next.js 7开始，我们不再直接使用默认的import()，Next.js为我们提供了开箱即用的import()支持。

\\\\

这个变更也是完全向后兼容的。使用动态组件非常简单：

\\\\

\import dynamic from 'next/dynamic'\const MyComponent = dynamic(import('../components/my-component'))\export default () =\u0026gt; {\  return \u0026lt;div\u0026gt;\    \u0026lt;MyComponent /\u0026gt;\  \u0026lt;/div\u0026gt;\}

\\\\

这段代码的作用是为my-component创建一个新的JavaScript文件，并只在渲染\\u0026lt;MyComponent/\\u0026gt;时加载它。

\\\\

最重要的是，如果没有进行渲染，\\u0026lt;script\\u0026gt;标记就不会出现在初始HTML文档中。

\\\\

为了进一步简化我们的代码库并利用优秀的React生态系统，在Next.js 7中，我们使用react-loadable重写了next/dynamic模块。这为动态组件引入了两个很棒的新特性：

\\\\

*  使用next/dynamic的timeout选项设置超时；\\\\t
 *  使用next/dynamic的delay选项设置组件加载延迟。例如，如果导入非常快，可以通过这个选项让加载组件在渲染加载状态之前等待一小段时间。\\

## Babel 7 ##

\\\\

Next.js 6中就已经引入了Babel 7测试版。后来Babel 7稳定版本发布，现在，Next.js 7正在使用这个新发布的稳定版Babel 7。

\\\\

一些主要特性：

\\\\

*  Typescript支持，在Next.js中可以使用@zeit/next-typescript；\\\\t
 *  片段语法\\u0026lt;\\u0026gt;支持；\\\\t
 *  babel.config.js支持；\\\\t
 *  通过overrides属性将预设/插件应用于文件或目录的子集。\\

如果你的Next.js项目中没有自定义Babel配置，那么就不存在重大变更。

\\\\

但如果你具有自定义Babel配置，则必须将相应的自定义插件/预设升级到最新版本。

\\\\

如果你从Next.js 6以下的版本升级，可以使用babel-upgrade工具。

\\\\

除了升级到Babel 7之外，当NODE\_ENV被设置为test时，Next.js Babel预设（next/babel）现在默认将modules选项设置为commonjs。

\\\\

这个配置选项通常是在Next.js项目中创建自定义.babelrc的唯一理由：

\\\\

\{\  \"env\": {\    \"development\": {\      \"presets\": [\"next/babel\"]\    },\    \"production\": {\      \"presets\": [\"next/babel\"]\    },\    \"test\": {\      \"presets\": [[\"next/babel\

[152910e3babfe6e3bcbc01f4c883e467.jpg]: /images/20220222/e60cbe6a54a041188e7fbcb68c800718.png
[173b40b40dd7b2bfc99ed2c3d42d21e7.gif]: /images/20220222/776650a62dc04d3e84800bd3cdf85228.png
[5133da9264cccc4a986b58f38984489d.png]: /images/20220222/92bbdf8bef5c409caf9d92be38a0e027.png