nuxt-build-optimisations

nuxt-build-optimisations

Instantly speed up your Nuxt.js 2 build time.

Why and how fast?

With the introduction of Vite, Nuxt feels sluggish. This package aims to give you 'vite-like' speed by modifying your Nuxt and webpack configurations to squeeze extra performance out of the build process.

Dev benchmark: :snowman: ~50% quicker cold starts, :fire: ~instant hot starts

Nuxt 3 will use Vite which will most likely make this package redundant.

Features

Safe

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

Experimental

• Not Dev: Babel transpile for not-dead browsers
• Replaces Terser minification with esbuild
• Enable Nuxt build cache
• webpack's best practices for performance

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

Usage

Within your nuxt.config.js add the following.

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

It's recommended you start with the risky profile and see if it works.

buildOptimisations: {
  profile: 'risky'
}

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

Configuration

Profile

Type: risky | experimental | safe | false

Default: risky

If you have errors on the risky 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: Measure can be buggy and can only work with SSR enabled.

Credits

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

License

MIT