🚀 Nuxt 2 is coming! Oh yeah!
Just 25 days after 1.4.0 release, Nuxt 2 is almost ready. Over 330 commits, 320 changed files, 8,200 additions, and 7,000 deletions not counting other nuxt repositories! OK, it seems LOTS of changes but don’t worry, we tried our best to have only a little amount of breaking changes and focus on stability, performance and better development experience. We just made a summary of the changes.
🏎 Webpack 4 (Legato)
Only this improvement worth a dedicated article. What’s new:
- 🏎 Webpack 4, is FAST!
- 😍 Mode, #0CJS, and sensible defaults
- ✂ Goodbye CommonsChunkPlugin
- 🔬WebAssembly Support
- 🐐 Module Type’s Introduced + .mjs support
- Default dev tool for client bundle is the webpack default
evalwhich is the fastest option.
- Module Concatenation (Scope Hoisting) optimization is enabled by default.
- Removed experimental option
build.dll. It was unstable and webpack 4 is fast enough.
💡 MIGRATION TIP: The good news is that you don’t need to change a single line of code in your project. Everything will be magically migrated as soon as you upgrade to Nuxt 2.
👋 Goodby vendors
Well, we still have
vendors chunk but it will be handled all automatically and much much more efficient. From this release, We don’t use CommonsChunkPlugin anymore so you don’t have to explicitly define vendors inside your project. Nuxt automatically adds core packages (vue, vue-router, babel-runtime, …) into a hinted Cache Group. This helps webpack splitting your code in the most efficient way.
💡 MIGRATION TIP: Remove
nuxt.config.js If you have some in your project safely remove them. If you are a module author, you can keep
this.addVendor() for legacy support. We may start showing deprecation warnings in next releases.
✂️ Full control over chunk splitting
Previously Nuxt was optioned for code splitting. While Nuxt tries to provide the most efficient splitting possible out of the box, you can now take complete control over it using
build.splitChunks option and optionally disable async chunks per route.
⚠️ BREAKING CHANGE: Nuxt no longer splits layout chunks by default. They will be loaded alongside the main entry-point just like Nuxt core, Plugins, Middleware and Store. You can enable layout splitting using
build.splitChunks.layouts: true Also for more control over webpack chunk splitting you can use
⚠️ BREAKING CHANGE: For production builds, we no longer use file names as a part of chunk names (
[hash.js]) this helps accidentally leak of you project internals. You can force enable names back using
build.optimization.splitChunks.name: true. (the name is still enabled on
--analyze mode if not specified)
⚠️ BREAKING CHANGE: Runtime (manifest) chunk is not split by default by webpack to reduce async requests and is moved into the main chunk. You can enable runtime splitting using
⚠️ CAUTION: Nuxt defaults are based on best practices and optimized after some benchmarks with real-world projects. I suggest reading RIP CommonsChunkPlugin by Tobias Koppers and analyze bundle after each change using
nuxt build --analyze.
💡 MIGRATION TIP: Stay with defaults. Benchmark your real projects and tailor options with care according to your needs.
🔥 Vue Loader 15 and mini-css-extract-plugin
If you don’t hear about vue-loader, it is the thing that parses
.vue files into runnable JS/CSS and HTMl. Vue-Loader 15 is a complete rewrite that uses a fairly different new architecture that is able to apply whatever rules defined in the main webpack config to the language blocks inside a
For CSS extraction, we use a new plugin mini-css-extract-plugin which supports On-Demand-Loading of CSS and SourceMaps (CSS splitting) and is built on top of a new webpack v4 feature (module types).
Both are new so expect little inconsistencies until our final 2.0.0 release. (BTW we have fully tested both plugins in different scenarios and they work like a charm!)
Nuxt 💖 ES modules
Now you can use
nuxt.config.js, server middleware and modules thanks to the std/esm. A fast, production ready, zero-dependency package to enable ES modules in Node 6+ by John-David Dalton.
🖥️ CLI Improvements
We appreciate developers and believe they need an elegant development experience to make great things. So we have reworked many things about CLI.
nuxt dev, you may felt a build delay even when CLI shows Nuxt is ready. This is because webpack runs twice. Once for Client and once for SSR bundle. The second one was hidden! So we made builds parallel and created WebpackBar to make life more enjoyable.
Now all debug messages are hidden by default (Can be enabled using
DEBUG=nuxt:* environment variable) and instead, we show smarter and better messages for both builder and generator.
A frequently requested enhancement for Nuxt was supporting Test and CI (Continuous Integration) environments. Nuxt 2 automatically detects CI and Test environments and will switch to a special mode called
minimalCLI with less verbose messages.
🤷 Remove deprecated features from Nuxt 1.0
- Removed tappable hooks (
nuxt.plugin()) in modules (Use new hooks system)
- Removed callback for modules (Use
asyncor return a
🎌 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 Improvements
Nuxt.js is a versatile framework for Vue.js developers which means it can be used both Universally (With Server-Side Rendering) or just Client Side (Single Page Application) mode. We have reworked some important areas of SPA.
One of the most important components for SPA is page loading indicator. It is redesigned, goes into the error state if any problem happens and will adaptively start displaying in DOM after ~2 seconds. This helps unnecessary screen flashes if SPA app is loading fast enough. We also added aria tags to help screen readers and search engines correctly detecting splash screen.
SPA mode uses a special Meta Renderer to add all meta tags defined in
nuxt.config.js into page headers for SEO reasons and HTTP2 push support! We have added support of
options.render.bundleRenderer.shouldPreload for SPA mode too.
⚠️ BREAKING CHANGE:
shouldPrefetch is disabled by default. Many users were reporting unwanted page chunk prefetching especially on medium sized projects. Also, all unnecessary resource hints are disabled by default on non-production mode for easier debugging.
🐰 Can’t wait for the release? Use nuxt-edge!
💭 Waiting for your feedbacks :)
Nuxt 2 is almost ready. We are doing final checks, improvements, and tests to release stable version as soon as possible. Meanwhile we are looking forward to your feedback at https://nuxtjs.cmty.io