nuxt 2

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

 [https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67]

 

---

1.4.0发布25天后，Nuxt2就即未来临。超过330次提交，320次更改文件，8,200次添加和7,000次删除（不包括其余nuxt repositories）！好吧，彷佛不少变化，但不用担忧，咱们会尽最大努力减小breaking changes的数量，更多的关注于稳定性，性能和更好的开发体验。咱们对这些变化进行了总结：

🏎 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 eval which is the fastest option.

• Module Concatenation (Scope Hoisting) optimization is enabled by default.

• 删除了实验属性 build.dll。它不稳定，而webpack 4速度已经足够快。

💡 迁移提示: 好消息是，你不须要更改项目中的任何代码。只要升级到Nuxt 2，全部东西都会马上迁移。

👋 弃掉了venders

咱们之前一直使用 vendors chunk，此次发布后，咱们再也不使用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强制开启。 (若是未指定，names仍然在 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中使用 import and 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.isServer and context.isClient (Use process.client and process.server)

• Removed options.dev in build.extend() (Use options.isDev)

• Removed tappable hooks ( nuxt.plugin()) in modules (Use new hooks system)

• Removed callback for modules (Use async or return a Promise)

🎌 Experimental Multi-Thread Compiler

虽然这将是webpack 5的官方功能，但你可使用实验性的 options.build.cache：true来启用cache-loader和babel cache以及 options.build.parallel：true启用thread-loader。

⭕ SPA改善

Nuxt.js是Vue.js开发人员的通用框架，这意味着它能够用于SSR或仅用于客户端（单页面应用）模式。咱们从新修改了SPA的一些重要内容。

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

SPA模式使用特殊的meta渲染器将 nuxt.config.js中定义的全部meta标签添加到页面标题中，以实现SEO和HTTP2支持！咱们也为SPA模式增长了 options.render.bundleRenderer.shouldPrefetch和 options.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