AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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:004982

评论

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

Python 绑定:从 Python 调用 C 或 C++

华为云开发者联盟

c c++ Python 函数 Python 绑定

我还是没有忍住,于是乎我开通了lua语言学习专栏!

李阿柯

lua 专栏

如何利用极狐GitLab CI提高生产力?

极狐GitLab

ci

百度交易中台之商品推广流程构建以及实现

百度Geek说

中台 软件架构 电商 交易

打造中国数字军人 数军科技携黑科技亮相军博会

科技热闻

统一缓存帝国 - 实战 Spring Cache

悟空聊架构

缓存 passjava 悟空聊架构 7月日更 Spring Cache

银行业智能运维的探索与实践

云智慧AIOps社区

银行数字化转型 智能运维

union 分页/group/join 复杂查询(.net core/framework)

Spook

sql ORM

华为云薛浩:媒体业务进入全面云化时代,云原生成为必然选择

华为云开发者联盟

云原生 媒体 音视频 华为云

DolphinDB插件开发深度解析

DolphinDB

数据库 大数据 时序数据库 插件开发 DolphinDB

互联网公司的「敏捷开发」流程是怎么样的?每个职位的角色和分工是什么?

万事ONES

替换 Spring Cloud,使用基于 Cloud Native 的服务治理

火山引擎开发者社区

云原生 后端 Service Mesh 服务网格

我删库跑路失败了

程序员鱼皮

Java c++ Python Linux 服务器

4轮技术面+1轮HR面,成功拿到腾讯40k*16的Offer ,详解面试流程和真题解析

Java 程序员 架构 面试

腾讯二面:Linux操作系统里一个进程最多可以创建多少个线程?

白亦杨

底层技术支撑智慧出行,汽车智能化发展下区块链大放异彩

旺链科技

区块链产业

Redisson 分布式锁源码 06:公平锁排队加锁

程序员小航

Java redis 分布式锁 redisson

多媒体技术(一)之图形图像

轻口味

android 音视频 计算机图形学 图形图像处理

Go 学习笔记之 数组

架构精进之路

Go 语言 7月日更

RTC为何这么火?

anyRTC开发者

音视频 WebRTC RTC 实时通讯

使用tar 命令进行文件的归档和压缩

学神来啦

云计算 Linux 运维 linux运维

DataWorks赋能企业一站式数据开发治理能力

阿里云大数据AI技术

研发管理和项目管理有哪些痛点?

万事ONES

研发管理 ONES 项目管理工具

小马哥的Java项目训练营-毕业总结

姑射仙人

网安行业这几个熟悉又陌生的名词,啥帽子都清楚啦?

郑州埃文科技

在数据库中如何查询表的创建时间?

华为云开发者联盟

数据库 日志 视图 GaussDB(DWS) 查找对象

什么?C语言也能try...catch!

实力程序员

萌宠大陆APP开发|萌宠大陆系统软件开发

并发王者课-铂金9:互通有无-Exchanger如何完成线程间的数据交换

MetaThoughts

Java 多线程 并发

拖延背后的故事

卢卡多多

拖延症 7月日更

我给我讲GIT,并成功把我得罪了

加百利

git 7月日更

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