nuxt-build-optimisations

Instantly speed up your Nuxt.js v2 build times.

Why and how fast?

Nuxt.js is fast but is limited by its webpack build, when your app grows things slow down.

Nuxt build optimisations abstracts the complexities of optimising your Nuxt.js app so anyone can instantly speed up their builds without having to learn webpack. The focus is primarily on the development build, as the optimisations are safer.

Benchmarks

Development: ⛄ 2-5x quicker cold starts, 🔥 almost instant hot starts (with "risky" profile)

Production: Should be a slight performance improvement depending on profile.

Features

The features are separated by their risk profile, how likely they are to cause issues within your app.

Safe

• Development: Super quick js/ts transpiling with esbuild ⚡
• Development: Images only use file-loader
• webpack benchmarking with speed-measure-webpack-plugin

Experimental

• Development: Disables postcss-preset-env pollyfills
• Replaces Terser minification with esbuild
• Enable Nuxt build cache
• webpack's best practices for performance
• Disables Nuxt features that aren't used (layouts, store)

Risky

• Enable Nuxt parallel
• Enable Nuxt hard source

Setup

Install using yarn or npm. (Nuxt.js 2.10+ is required)

yarn add nuxt-build-optimisations

npm i --save-dev nuxt-build-optimisations

• ⚠️ This package makes optimisations with the assumption you're developing on the latest chrome.
• Note: Nuxt 3 will use Vite which will most likely make this package redundant in the future.

---

Usage

Within your nuxt.config.js add the following.

// nuxt.config.js
buildModules: [
  'nuxt-build-optimisations',
],

It's recommended you start with the default configuration, which is the experimental profile.

However if you'd like to try and get more performance you can try the following:

// nuxt.config.js
buildOptimisations: {
  profile: process.env.NODE_ENV === 'development' ? 'risky' : 'experimental'
},

⚠️ Note: The risky profile uses HardSource caching, if you use it in your production CI with node / npm caching then you need to make sure it caches per branch.

A lot of the speed improvements are from heavy caching, if you have any issues the first thing you should do is clear your cache.

rm -rf node_modules/.cache

//windows
rd /s  "node_modules/.cache"

Configuration

Profile

Type: risky | experimental | safe | false

Default: experimental

If you have errors on any mode you should increment down in profiles until you find one that works.

Setting the profile to false will disable the optimisations, useful when you want to measure your build time without optimisations.

Measure

Type: boolean or object

Default: false

When measure is enabled with true (options or environment variable), it will use the speed-measure-webpack-plugin.

If the measure option is an object it is assumed to be speed-measure-webpack-plugin options.

buildOptimisations: {
  measure: {
    outputFormat: 'humanVerbose',
    granularLoaderData: true,
    loaderTopFiles: 10
  }
}

You can use an environment variable to enable the measure as well.

package.json

{
  "scripts": {
    "measure": "export NUXT_MEASURE=true; nuxt dev"
  }
}

Note: Some features are disabled with measure on, such as caching.

Measure Mode

Type: client | server | modern | all

Default: client

Configure which build will be measured. Note that non-client builds may be buggy and mess with HMR.

buildOptimisations: {
  measureMode: 'all'
}

Features

Type: object

Default:

// uses esbuild loader
esbuildLoader: true
// uses esbuild as a minifier
esbuildMinifier: true
// swaps url-loader for file-loader
imageFileLoader: true
// misc webpack optimisations
webpackOptimisations: true
// no polyfilling css in development
postcssNoPolyfills: true
// inject the webpack cache-loader loader
cacheLoader: boolean
// use the hardsource plugin
hardSourcePlugin: boolean

You can disable features if you'd like to skip optimisations.

buildOptimisations: {
  features: {
    // use url-loader
    imageFileLoader: false
  }
}

esbuildLoaderOptions

Type: object or (args) => object

Default:

{
  target: 'es2015'
}

See (esbuild-loader)[https://github.com/privatenumber/esbuild-loader].

esbuildMinifyOptions

Type: object or (args) => object

Default:

{
  target: 'es2015'
}

See (esbuild-loader)[https://github.com/privatenumber/esbuild-loader].

Credits

• https://github.com/galvez/nuxt-esbuild-module

License

MIT