The original source
🚀 Nuxt 2 is coming! Oh yeah! – Nuxt. Js – Medium

Just 25 days after the release of 1.4.0, Nuxt2 arrived. More than 330 submissions, 320 file changes, 8,200 add-ins and 7,000 deletions, excluding other Repositories! Well, it seems like a lot of changes, but don’t worry, we’re doing our best to have a few breakthrough changes and focus on stability, performance, and a better development experience. We summarize these changes:

🏎 Webpack 4 (Dr. Legato)

This improvement alone deserves a special article. What’s new?

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

For more information see Sean T. Larkin’s article and Webpack Release Notes.

Other improvements:

  • 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.
  • Deleted experimental attributesbuild.dll. It’s unstable, and WebPack 4 is fast enough.

💡 Migration tip: The good news is that you don’t need to change any code in your project. Once you upgrade to Nuxt 2, everything will migrate immediately.

👋 dropped Venders

We have always used Vendors Chunk, but it will be processed automatically and more efficient. After this release, we no longer use the CommonsChunkPlugin, so we don’t have to specify vendors explicitly. Nuxt automatically adds core packages(including Vue, VUe-Router, Babel-Runtime…) To the Cache Group. This allows WebPack to break up your code in the most logical way possible.

💡 Migration tip: If you configure vendors in nuxt.config.js in your project, remove them. If you are a Module author, you can continue to use this.addvendor (), but we may have deprecation prompts.

✂️ Chunk Splitting’s full control

Previously, Nuxt was chosen for code splitting. Although Nuxt tries to provide the most efficient fragmentation possible, you now have full control over it using the build.splitchunks option and can choose to disable asynchronous chunks per path.

⚠️ BREAKING CHANGE: Nuxt will no longer split layout chunks by default, they will now be loaded into main portals like Nuxt Core, plugins, Middleware and Store. You can build. SplitChunks. Layouts: true makes the resolution of the layout. In addition to better control webpack piece break up, you can use the build. Optimization. SplitChunks options.

⚠️ BREAKING CHANGE: For production environments, we no longer use file names as part of chunk names (/_nuxt/pages/foo/bar.[hash].js becomes [hash.js]) to help you find bugs within the project. You can use the build. Optimization. SplitChunks. Name: true forced open. (If not specified, the name is still enabled in dev and –analyze mode)

⚠️ BREAKING CHANGE: Webpack does not split the Runtime (manifest) chunk by default to reduce asynchronous requests and instead move it to the main chunk. You can use the build. Optimization. RuntimeChunk: true.

⚠️ Note: The default Settings for Nuxt are based on best practices and have been optimized after application with real projects. It is recommended to read the RIP CommonsChunkPlugin written by Tobias Koppers and use nuxt build — Analyze after each change.

💡 Migration tip: Keep the default values. Benchmark your actual project according to your requirements and customize options as needed.

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

If you haven’t heard of vue-loader, it parses.vue files into runnable JS/CSS and HTMl. Vue-loader 15 has been completely rewritten, using a completely different new architecture that can apply any rule defined in a Webpack configuration to *.vue files.

For CSS extraction, we use a new plug-in, mini-CSS-extract-Plugin, which supports on-demand loading of CSS and SourceMaps (CSS Splitting) and builds on the new WebPack V4 feature (Module Types).

Both are new, so expect some inconsistencies until our final 2.0.0 release. (By the way, we’ve fully tested two plug-ins in different scenarios, and they work charmingly)

Nuxt 💖 ES modules

Now you can use import and export, server middleware, and modules in nuxt.config.js thanks to STD/ESM. A fast, production Ready, zero-dependency package to enable ES modules in Node 6+ by John-David Dalton.

Improved 🖥 ️ CLI

We were very grateful to the developers and believed that they needed elegant development experience to create beautiful things, so we rewrote a lot of things about the CLI.

When using Nuxt Dev, you may feel a build delay even if the CLI shows that NuxT is ready. This is because Webpack runs twice. Once for client and once for SSR binding. The second one is hidden! Therefore, we will build parallel and create WebpackBar to make development more pleasant.

Now, all debug messages are hidden by default (this can be enabled using debug =nuxt:* environment variables), and we show better information for Builder and Generator instead.

Nuxt often requires enhancements to support Test and CI (continuous integration) environments. Nuxt 2 automatically detects configuration items and the test environment and switches to a special mode called minimalCLI, which contains fewer detailed messages.

Features removed from 🤷 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

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

⭕ SPA to improve

Nuxt.js is a common framework for vue.js developers, which means it can be used in SSR or client-only (single-page application) patterns. We have reworked some of the most important aspects of SPA.

One of the most important components of SPA is the page load indicator. It has been redesigned to go into an error state if anything goes wrong, and adaptively starts displaying in the DOM after about 2 seconds. If the SPA app loads fast enough, this will help with unnecessary splash screens. We also added aria tags to help screen readers and search engines detect splash screens correctly.

Adaptive SPA Loading component under slow 3G

SPA mode uses a special Meta renderer to add all meta tags defined in nuxt.config.js to the page title for SEO and HTTP2 support! We also increased the options for SPA mode. The render. BundleRenderer. ShouldPrefetch and options. The render. BundleRenderer. ShouldPreload

⚠️ BREAKING CHANGE: shouldPrefetch is disabled by default. Many users report unwanted page blocks prefetch, especially on mid-sized projects. In addition, all unnecessary resource prompts are disabled in non-production mode for debugging purposes.

🐰 can’t wait to release? Use the nuxt – edge!

You can help us experiment with the latest features by removing [NUxt] [12] and installing the [NuxT-Edge] [13]NPM package. Feel free to leave your comments under [edge].

For YARN, you can use this command to install: yarn add nuxt@npm:nuxt-edge (Thanks to the Benoit Emile’s suggestion)

💭 looking forward to your feedback 🙂

Nuxt 2 is coming. We are doing final checks, optimizations and testing to release a more stable version. In the meantime, we look forward to your feedback https://nuxtjs.cmty.io