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

  • 时间:2018-10-02 22:59 作者:InfoQ 来源:InfoQ 阅读:946
  • 扫一扫,手机访问
摘要:首先,我们先来看自 Nuxt 创立以来的少量统计数据: Google Analytics约 1200 万次页面访问;约 75 万独立访问者;访问者最多的 5 个国家:美国、中国、英国、日本和俄罗斯。 GitHub96 次发布;约 14860 个 star;约 3900 个问题和 PR(97% 已关闭
Nuxt 2.0正式发布:支持 Webpack 4、ES module

首先,我们先来看自 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
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部