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

Note: Nuxt 3 will use Vite which will most likely make this package redundant in the future.

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

• 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

:warning: This package is in pre-release. Make sure you test your app before deploying this into production.

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.

// nuxt.config.js
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: 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: Measure can be buggy and can only work with SSR enabled.

Features

Type: object

Default:

esbuildLoader: true,
esbuildMinifier: true,
imageFileLoader: true,
webpackOptimisations: true

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

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

esbuildLoaderOptions

Type: object

Default:

{
  target: 'es2015'
}

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

esbuildMinifyOptions

Type: object

Default:

{
  target: 'es2015'
}

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

Credits

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

License

MIT