🚀 Nuxt 2即将来临!Oh yeah!

原文出处 🚀 Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium


1.4.0发布后仅仅25天,就又迎来了Nuxt2。超过330次提交,320次更改文件,8,200次添加和7,000次删除,不包括其他nuxt repositories!好吧,似乎很多变化,但不用担心,我们尽最大努力只有少量突破性变化,并关注稳定性,性能和更好的开发体验。我们对这些变化进行了总结:

🏎 Webpack 4 (Legato)

仅这个改进就值得一篇专门的文章。有什么新特性呢?

  • 🏎 Webpack 4, is FAST!
  • 😍 Mode, #0CJS, and sensible defaults
  • ✂ Goodbye CommonsChunkPlugin
  • 🔬WebAssembly Support
  • 🐐 Module Type’s Introduced + .mjs support

想了解更多信息请看 Sean T. Larkin这篇文章以及Webpack Release Notes.

其他改进:

  • Default dev tool for client bundle is the webpack default evalwhich is the fastest option.
  • Module Concatenation (Scope Hoisting) optimization is enabled by default.
  • 删除了实验属性build.dll。它不稳定,而webpack 4速度已经足够快。

💡 迁移提示:好消息是,您不需要更改项目中的任何代码。只要升级到Nuxt 2,所有东西都会立刻迁移。

👋 弃掉了venders

我们一直使用 vendorschunk,但是它将被自动处理并且效率更高。这次发布后,我们不再使用CommonsChunkPlugin,所以我们不必明确指定vendors。Nuxt自动添加了核心的packages(包括vue,vue-router,babel-runtime...)到Cache Group中。这使得webpack可以用最合理的方式拆分你的代码。

💡 迁移提示:如果你在项目中的nuxt.config.js中配置了vendors,直接去掉即可。 如果你是一个module author,你可以继续使用this.addVendor(),但我们可能会有弃用提示。

✂️ chunk splitting的完全控制

以前,Nuxt被选择用于代码分割。尽管Nuxt试图提供可能的最有效的分割,但您现在可以使用build.splitChunks选项完全控制它,并且可以选择禁用每个路径的异步块。

⚠️ BREAKING CHANGE:nuxt默认不再拆分layout chunks,他们将被加载进主入口像nuxt core, plugins, middleware和store。你也可以通过build.splitChunks.layouts: true使得layout拆分。另外为了更好的控制 webpack块分割,你可以使用build.optimization.splitChunks选项。

⚠️ BREAKING CHANGE:对于生产环境,我们不再使用文件名作为 chunk names 的一部分( /_nuxt/pages/foo/bar.[hash].js变成[hash.js])这样可以帮你发现工程内部的漏洞。你可以可以使用build.optimization.splitChunks.name: true强制开启。 (如果未指定,名称仍然在 dev--analyze模式下启用)

⚠️ BREAKING CHANGE:webpack默认不会拆分runtime(manifest)chunk,以减少异步请求而是将其移入main chunk。你可以使用build.optimization.runtimeChunk: true启用。

⚠️ 注意:Nuxt的默认设置基于最佳实践,并在与实际项目应用之后进行了优化。建议阅读 Tobias Koppers写的RIP CommonsChunkPlugin并在每次更改之后使用nuxt build --analyze.

💡 迁移提示:保持默认值。根据您的需求对您的实际项目进行基准测试并根据需要定制选项。

🔥 Vue Loader 15 and mini-css-extract-plugin

如果您没有听过vue-loader, 其实他就是把 .vue文件解析为可运行的JS/CSS and HTMl。Vue-Loader 15进行了完全的重写,它使用了一种完全不同的新架构,能够将webpack配置中定义的任何规则应用于* .vue文件内。

对于CSS抽取,我们使用一个新的插件mini-css-extract-plugin,它支持CSS和SourceMaps(CSS splitting)的按需加载,并构建在新的webpack v4特性(module types)上。

两者都是新的,所以在我们最终的2.0.0版本发布之前,预计会有一些不一致。 (顺便说一句,我们已经完全测试了不同场景下的两个插件,并且它们工作起来很有魅力)

Nuxt 💖 ES modules

现在你可以在nuxt.config.js中使用importand export, 服务器middleware和modules要感谢std/esm. A fast, production ready, zero-dependency package to enable ES modules in Node 6+ by John-David Dalton.

🖥️ CLI 改善

我们非常感谢开发人员,并相信他们需要优雅的开发经验才能创造美好的事物,所以我们重写了很多关于CLI的东西。

在使用 nuxt dev时, 即使CLI显示Nuxt准备就绪,您也可能感觉到构建延迟。这是因为webpack运行两次。一次用于客户端,一次用于SSR捆绑。第二个是隐藏的!因此,我们将构建平行并创建 WebpackBar,开发更愉快。

现在,所有debug信息都默认隐藏(可以使用DEBUG=nuxt:*环境变量启用),相反,我们会为builder和generator展示更好的信息。

Nuxt经常要求的增强功能支持Test and CI(持续集成)环境。 Nuxt 2自动检测配置项和测试环境,并将切换到一个称为minimalCLI的特殊模式,其中包含更少的详细消息。

🤷 Nuxt 1.0中删除的功能

  • Removed context.isServerand context.isClient(Use process.clientand process.server)
  • Removed options.devin build.extend()(Use options.isDev)
  • Removed tappable hooks (nuxt.plugin()) in modules (Use new hooks system)
  • Removed callback for modules (Use asyncor return a Promise)

🎌 Experimental Multi-Thread Compiler

While this is going to be an official feature of webpack 5, you can use experimental options.build.cache: trueto enable cache-loaderand babel cache and options.build.parallel: trueto enable thread-loader.

⭕ SPA改善

Nuxt.js是Vue.js开发人员的通用框架,这意味着它可以用于SSR或仅用于客户端(单页面应用)模式。我们重新修改了SPA的一些重要内容。

SPA重要的组件之一是页面加载指示器。它被重新设计,如果发生任何问题就会进入错误状态,并会在约2秒后自适应地开始在DOM中显示。如果SPA应用加载速度够快,这将有助于不必要的闪屏。我们还添加了aria标签,以帮助屏幕阅读器和搜索引擎正确检测启动画面。

在慢3G下的自适应SPA Loading组件

SPA模式使用特殊的meta渲染器将nuxt.config.js中定义的所有meta标签添加到页面标题中,以实现SEO和HTTP2支持!我们也为SPA模式增加了options.render.bundleRenderer.shouldPrefetchoptions.render.bundleRenderer.shouldPreload

⚠️ BREAKING CHANGE:shouldPrefetch默认是禁用的。许多用户反馈不需要的页面块prefetch,尤其是在中型项目上。此外,所有不必要的资源提示在非生产模式下都会被禁用,以便于调试。

🐰 等不及发布了吧? 使用nuxt-edge!

您可以通过删除[nuxt] [12]并安装[nuxt-edge] [13]NPM package来帮助我们试验最新功能。随意留下您的评论标上[edge]

对于yarn,你可以使用这个命令安装: yarn add nuxt@npm:nuxt-edge(Thanks to the Benoît Emile’s suggestion)

💭 期待你的反馈 :)

Nuxt 2 即将来临。我们正在做最后的检查,优化和测试以便发布更加稳定的版本。同时我们期待您的反馈 https://nuxtjs.cmty.io

原文链接:www.zcfy.cc

上一篇:在JavaScript中转换长字符串为缩写字符串,具有特殊的短小要求
下一篇:你想不到的!CSS 实现的各种球体效果

相关推荐

  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    2 个月前
  • 详解Nuxt.js Vue服务端渲染摸索

    本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/(https://zh.nuxtjs.org/) Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组...

    2 年前
  • 详细介绍Nuxt项目上线部署

    引言 ❝ 因为Vue的单页面开发不利于SEO,有时候做一些需要做SEO的项目,就要使用服务端渲染,这样搜索引擎怕虫就能爬取到网站的信息,显示到搜索的内容。Vue官方提供的服务端渲染文档可以自己搭建一个...

    24 天前
  • 记录使用Nuxt开发服务端渲染项目时遇到的问题难点整理(不定时更新)

    1、掘金上有一些很不错的Nuxt教程文章,推荐几篇: https://juejin.im/post/58ff96...(https://juejin.im/post/58ff960ba22b9d006...

    1 年前
  • 记一次nuxt2.0开发小结

    使用之前先撸遍官方文档 绝多部分问题,都可以在网上搜得到,所以整体开发还算顺利,难度一般,以下纪录本人项目中用到和总结的一些知识,后面有新的问题会更新,欢迎讨论! 路由守卫 自定义全...

    5 个月前
  • 解析Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 (https://img.javas...

    2 年前
  • 精读《Nuxtjs》

    1 引言 Nuxt(https://github.com/nuxt/nuxt.js) 是基于 Vue 的前端开发框架,这次我们通过 Introduction toNuxtJS(https://ww...

    8 个月前
  • 简述SSR服务端渲染之使用Nuxt搭建一个vue从0到1的项目!

    导读 vue的高效开发不言而喻,但是单纯的使用vuecli开发是否经常遇到页面不被收录,爬虫抓取不到页面的苦恼呢?那我们一起来看看nuxtvuejs的通用框架。 本文主要讲述使用nuxt.js搭建vu...

    14 天前
  • 用hapi.js mysql和nuxt.js撸一个仿简书的项目

    前言: 预览: 开始: 1. npm i 2. 把mysql配置好 3. npm run server or npm run dev 实现功能: 用户: 登录、注册、用户...

    8 个月前
  • 服务端预渲染之Nuxt - (爬坑篇)

    是解决的比较常用的解决方案,随着也有很多坑,每当突破一个小技术点的时候,都有很大的成就感,在这段时间里着实让我痛并快乐着。在这里根据个人学习情况,所踩过的坑做了一个汇总和总结。

    1 年前

官方社区

扫码加入 JavaScript 社区