写点什么

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

  • 2018-10-01
  • 本文字数:3472 字

    阅读完需:约 11 分钟

首先,我们先来看自 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 等公司的技术专家来分享。

大会 8 折报名中,立减 1360 元,有任何问题欢迎咨询票务经理 Lachel- 灰灰,电话 / 微信:17326843116。

2018-10-01 19:004543

评论

发布
暂无评论
发现更多内容

完美!华为爆出Redis宝典,原来Redis性能可压榨到极致

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

InfoQ 写作平台优质创作者签约计划第二季,我们来了!

InfoQ写作社区官方

签约计划第二季 热门活动

首次公布Java10W字面经,Github访问量破百万

热爱java的分享家

Java 架构 面试 程序人生 经验分享

PingCode Wiki 协同编辑技术揭秘

PingCode研发中心

wiki PingCode

这样准备面试定能轻松斩获offer!(内附精选java面试题与答案)

Geek_1df311

Java 程序员 架构 面试

Js 异步处理演进,Callback=>Promise=>Observer

CRMEB

花了30天才肝出来,史上最全面Java设计模式总结,看完再也不会忘

Tom弹架构

Java 架构 设计模式

ExoPlayer播放在线TS文件无声音问题分析

Changing Lin

11月日更

IMS究竟有什么用?

鸿天hente

单元测试再出发

FunTester

Java 单元测试 测试框架 spock Groovy

百度ERNIE新突破!登顶中文医疗信息处理权威榜单CBLUE冠军

科技热闻

智能客服"下半场":数据、技术与服务

百度大脑

人工智能

参赛必读!! 签约计划第二季考核要求

InfoQ写作社区官方

签约计划第二季 热门活动

中科柏诚加入信创生态实验室,助力金融领域关键核心技术攻关

联营汇聚

WorkPlus协同办公系统的优势有哪些?

WorkPlus

双非渣硕,在传统公司磨炼四年后成功拿到阿里offer!(附面经分享)

Geek_1df311

Java 程序员 架构 面试

硬核!阿里自爆虐心万字面试手册,Github上获赞89.7K

热爱java的分享家

Java 架构 面试 编程语言 经验分享

研发效能团队如何拥抱开源社区?一些前沿理念与朴素认知

Zilliz

直播带货软件原生开发直播带货小程序平台搭建

风行无疆

从落地效果看,转转选择TDengine的三个理由

TDengine

tdengine 后端 时序数据库

限量!腾讯高工用4部分讲清楚了Spring全家桶+微服务

热爱java的分享家

Java 面试 程序人生 编程语言 经验分享

Python代码阅读(第64篇):角度与弧度互转

Felix

Python 编程 Code 阅读代码 Python初学者

联想智慧服务获金耳唛奖总冠军暨业务交流会在京举行

科技大数据

汽车之家 x StarRocks:极速实时数据分析实践

StarRocks

大数据 数据分析 StarRocks OLAP数据库

淘特 Flutter 流式场景的深度优化

阿里巴巴终端技术

flutter ios android 移动应用 客户端开发

工具 | pg_recovery 设计原理与源码解读

RadonDB

数据库 postgresql 源码 RadonDB

莫慌!阿里人用五个模块讲明白了SpringCloud,可下载

热爱java的分享家

Java 架构 面试 编程语言 经验分享

AI 收藏夹 Vol.002

Zilliz

为什么工业巨头们偏爱自建5G私有专网!

鸿天hente

盲盒app源码开发盲盒小程序原生开发搭建

风行无疆

掘金新大陆——最后一个十亿蓝海

Nuxt 2.0正式发布:支持 Webpack 4、ES module_语言 & 开发_Nuxt.js_InfoQ精选文章