Nuxt 2.0正式发布：支持 Webpack 4ES module

Posted 2021-04-29 前端之巅

译者｜无明

编辑｜覃云

近日，Nuxt 2.0 正式发布，Nuxt 2.0 带来了大量新特性和改进，并专注于稳定性、性能和更好的开发者体验。

首先，我们先来看自 Nuxt 创建以来的一些统计数据：

 Google Analytics

• 约 1200 万次页面访问；

• 约 75 万独立访问者；

• 访问者最多的 5 个国家：美国、中国、英国、日本和俄罗斯。

 GitHub

• 96 次发布；

• 约 14860 个 star；

• 约 3900 个问题和 PR（97% 已关闭）。

 Twitter

• 13 万 5 千多个关注者（https://twitter.com/nuxt_js）；

• 900 多个推文。

 NPM

• 约 1200 万次下载；

• 53 个官方模块（https://www.npmjs.com/org/nuxtjs）。

新版本的主要变化：

支持 Webpack 4

光是这一改进就值得专门写一篇文章进行介绍：

• Webpack 4 速度非常快；

• 模式、#0CJS 和合理的默认值；

• 不再需要 CommonsChunkPlugin；

• WebAssembly 支持；

• 引入模块类型以及.mjs 支持。

其他变化：

• 客户端捆绑包的默认开发工具是默认的 eval，它的速度是最快的。

• 默认情况下启用模块串联（作用域提升）优化。

• 删除了实验选项 build.dll。它不太稳定，况且 Webpack 4 已经足够快了。

迁移提示：用户不需要修改项目中的任何一行代码，升级到 Nuxt 2 后，一切都将神奇般地自动帮你迁移完毕。

不再需要 vendors

Nuxt 2 仍然存在 vendors 块，但会自动处理它，而且效率更高。从这个版本开始，不再使用 CommonsChunkPlugin，所以用户不必在项目中显式定义 vendors。Nuxt 会自动将核心软件包（vue、vue-router、babel-runtime 等）添加到指定的 Cache Group 中，这有助 Webpack 以最有效的方式拆分代码。

迁移提示：从 nuxt.config.js 中删除 vendors。如果你的项目中包含了 vendors，可以安全地删除它们。如果你是模块作者，可以保留 this.addVendor() 为旧版本提供支持。下一版本可能会显示弃用警告。

完全控制块拆分

Nuxt 尝试提供开箱即用的最有效的代码拆分功能，不过，现在用户可以通过 build.splitChunks 选项来完全控制代码拆分，并可以选择性地禁用路由的异步块。

重大变更：默认情况下，Nuxt 不再拆分布局块。它们将与主入口点一起加载，就像 Nuxt Core、Plugins、Middleware 和 Store 一样。用户可以通过 build.splitChunks.layouts: true 来启用布局拆分。另外，为了更好地控制 Webpack 块拆分，可以使用 build.optimization.splitChunks 选项。

重大变更：对于生产版本的构建，不再使用文件名作为块名称的一部分（/_nuxt/pages/foo/bar.[hash].js 变成了 [hash.js]）。用户可以使用 build.optimization.splitChunks.name：true 强制恢复启用文件名称（如果未指定，在 dev 和 --analyze 模式下仍然会启用文件名称）。

重大变更：为了减少异步请求，Webpack 默认不拆分运行时（manifest）块，并将其移到主块中。用户可以通过 build.optimization.runtimeChunk：true 来启用运行时拆分。

注意：Nuxt 的默认设置是以一些最佳实践为基础，并基于实际项目的基准测试进行了优化。建议用户在每次做出更改后使用 nuxt build --analyze 分析 bundle。

迁移提示：保持默认设置。对你的实际项目进行基准测试，然后根据你的需要精心定制配置选项。

Vue Loader 15 和 mini-css-extract-plugin**

vue-loader（https://vue-loader.vuejs.org/en/）可以将.vue 文件解析为可运行的 JS/CSS 和 html。Vue-Loader 15 使用完全不同的新架构进行了重写，可以将主 Webpack 配置中定义的任何规则应用于 *.vue 文件中的语言块。

对于 CSS 提取，使用了一个新的插件 mini-css-extract-plugin，它支持按需加载 CSS 和 SourceMaps（CSS 拆分），并且是基于 Webpack v4 的新功能（模块类型）而构建。

因为这两个插件都是新的，所以预计在最终发布 2.0.0 版本之前，可能会出现一些不一致。这两个插件已经在不同场景中进行了全面测试，它们表现得非常好！

Nuxt 和 ES module

现在用户可以通过 std/esm（https://github.com/standard-things/esm）在 nuxt.config.js 中导入和导出 Middleware 和模块中。std/esm 是一个快速、生产就绪、零依赖的软件包，用于在 Node 6+ 中启用 ES 模块。

CLI 改进

开发者需要优雅的开发经验来开发出色的软件，于是 Nuxt 团队重新设计了很多有关 CLI 的东西。

在使用 nuxt dev 时，即使 CLI 显示 Nuxt 已准备就绪，用户仍然可能感觉到构建延迟。这是因为运行了两次 Webpack。一次是为客户端，一次是为 SSR 捆绑，但第二次运行被隐藏起来。现在构建被并行化，同时开发了 WebpackBar（https://github.com/nuxt/webpackbar），可以查看构建进度，还有其他很多功能。

现在，默认情况下隐藏所有调试消息（可以通过设置环境变量 DEBUG = nuxt:* 来启用），同时为构建器和生成器更智能、更好地显示消息。

用户经常要求 Nuxt 支持测试和 CI（持续集成）环境。Nuxt 2 将自动检测 CI 和测试环境，并切换到 minimalCLI 特殊模式，在该模式下包含较少的打印消息。

移除 Nuxt 1.0 中弃用的特性

• 移除 context.isServer 和 context.isClient（使用 process.client 和 process.server 代替）；

• 移除 build.extend() 中的 options.dev（使用 options.isDev 代替）；

• 移除了模块中的 tappable hooks（nuxt.plugin()）（使用新的钩子系统）；

• 删除了模块的回调（使用异步或返回 Promise）。

实验性的多线程编译器

这个特性将在 Webpack 5 中正式发布，不过用户现在可以通过 options.build.cache: true 来启用 cache-loader 和 Babel 缓存，以及通过 options.build.parallel: true 来启用 thread-loader。

SPA 改进

Nuxt.js 是 Vue.js 开发人员的通用框架，它既可以用于全局环境（与服务器端渲染一起），也可以用于客户端（单页应用程序，SPA）。Nuxt 重新设计了与 SPA 有关的一些重要方面。

SPA 最重要的组件之一是页面加载指示器。Nuxt 团队对其进行了重新设计，如果出现任何问题，就会进入错误状态，并在大约 2 秒后自适应地显示在 DOM 中。如果 SPA 应用程序加载足够快，可以避免不必要的屏幕闪烁。还添加了 aria 标签，帮助屏幕阅读器和搜索引擎正确检测启动画面。

出于 SEO 方面的原因以及支持 HTTP2 推送，SPA 模式使用特殊的 Meta 渲染器将 nuxt.config.js 中定义的所有元标记添加到页眉中。同时还为 SPA 模式添加了 options.render.bundleRenderer.shouldPrefetch 和 options.render.bundleRenderer.shouldPreload。

重大变更：默认情况下禁用 shouldPrefetch。很多用户反应存在不必要的页面块预取，尤其是在中型项目中。此外，为了方便调试，非生产模式下默认禁用所有不必要的资源提示。

create-nuxt-app

create-nuxt-app 是 Nuxt 官方的脚手架工具，用于生成各种模板，如项目启动模板、Express 模板等。有了 create-nuxt-app，用户可以选择与服务器端框架（如 Express、Koa、Adonis 等）集成，或者与 UI 框架（如 Vuetify、Bootstrap、Tailwind 等）集成，或者也可以使用 axios 模块。

现在你可以更快地创建一个 Nuxt 新项目了。

迁移指南

用户可以通过 yarn add nuxt@^2.0.0 或 npm install nuxt@^2.0.0 进行升级。下面是完整的迁移步骤指南：

• 仔细阅读发布公告；

• 如果使用的是 VCS，请在新分支上进行代码提交和推送；

• 停止所有的 Nuxt 进程；

• 可选：删除所有.nuxt、node_modules、yarn.lock 和 package.lock.json 目录和文件；

• 确保使用的是最新版本的 Node（建议使用 Node 10.x 和 NPM 5 以上版本）；

• 在 nuxt.config.js、modules 和 serverMiddleware 中使用 import/export 代替 require；

• 确保没有在 package.json 中显式设置 Webpack 和 Vue 依赖，如果有，请将它们升级到与 Nuxt 匹配的版本；

• 使用 npm 和 yarn 进行安装；

• 可选：使用 npm outdated 或 yarn outdated，并小心手动更新所有依赖项；

• 如果使用了 CDN 部署系统，请确保更新 CI/CD 配置，使用.nuxt/dist/client 代替.nuxt/dist。

 参考链接

• https://medium.com/@nuxt_js/nuxt-js-2-0-webpack-4-esm-modules-create-nuxt-app-and-more-6936ce80d94c

• https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67

• https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0

  活动推荐

ArchSummit 全球架构师峰会将于 12 月 7-8 日在北京国际会议中心举办，会议专题聚集了微服务金融架构、微服务架构、数据基础平台建设、短视频架构、区块链、信息隐私安全等话题。邀请了阿里巴巴、Netflix、百度、LinkedIn 等公司的技术专家来分享。