nuxt-build-optimisations

nuxt-build-optimisations

Instantly speed up your Nuxt.js v2 build times.

About

Why do I need this?

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.

For the best possible performance, consider using: Nuxt Vite. This package is for webpack stuck projects.

How fast is it?

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

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

Features

Features are enabled by their risk profile. The risk profile is the likelihood of issues coming up.

Safe (safest)

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

Experimental (mostly safe)

• 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 (may throw errors)

• 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 nuxt-build-optimisations

:warning: This package makes optimisations with the assumption you're developing on the latest chrome.

---

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'
}

Feature Flags

Type: object

Default:

// uses esbuild loader
esbuildLoader: boolean
// uses esbuild as a minifier
esbuildMinifier: boolean
// swaps url-loader for file-loader
imageFileLoader: boolean
// misc webpack optimisations
webpackOptimisations: boolean
// no polyfilling css in development
postcssNoPolyfills: boolean
// inject the webpack cache-loader loader
cacheLoader: boolean
// use the hardsource plugin
hardSourcePlugin: boolean
// use the parallel thread plugin
parallelPlugin: 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.

esbuildMinifyOptions

Type: object or (args) => object

Default:

{
  target: 'es2015'
}

See esbuild-loader.

Gotchas

Vue Property Decorator / Vue Class Component

Your babel-loader will be replaced with esbuild, which doesn't support class decorators in js.

You can either migrate your scripts to typescript or disabled the esbuild loader.

Disable Loader

buildOptimisations: {
  features: {
    esbuildLoader: false
  }
}

Migrate to TypeScript

tsconfig.json

{
  "experimentalDecorators": true
}

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  data () {
    return {
      hello: 'test'
    }
  }
}
</script>

Credits

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

License

MIT