微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

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

2018-09-26 17:28 前端之巅
译者|无明
编辑|覃云
近日,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 等公司的技术专家来分享。

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

 
前端之巅 更多文章 百度智能小程序月活破亿,今日正式开放申请 Electron 3.0正式版发布,新特性详解 Stack Overflow预测:Python将在五年内超越JavaScript 为什么说React 16是开发者的福音? 你拆分JS代码的方法可能是错的!
猜您喜欢 年薪50万的Java EE学习路线图,快学起来~ 书单:一个进阶的Android程序员 【独家】安卓巴士视频教学:Picasso图片缓存框架讲解 推荐七个值得关注的公众号 【投票】你自己说:源妹儿我到底是不是你的最爱????