rasata / nuxt-webpack-optimisations Goto Github PK

Webpack Build Time Optimisations for Nuxt.js! ⚡️
^{Instantly speed up your Nuxt.js webpack build time.}

Status: Stable v2 ✅ , bridge ✅, v3 ⚠️ Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦

Previously: "nuxt-build-optimisations", see migration notes.

i.e Nuxt Vite or Nuxt 3

Truly sad... But I do have some good news. While you won't be able to achieve instant app starts anytime soon, nuxt-webpack-optimisations can get things snappy again.

nuxt-webpack-optimisations is a collection of webpack config changes that will let you speed up your build times and audit them.

By making smarter and riskier assumptions on how you want to run your environment in development, this module has been benchmarked to reduce your build time by ~50% when cold ☃ , ~95%+ when hot 🔥 (using hardsource).

The riskier optimisations are enabled only on development and relate to over caching, which is always easy to fix with a good old rm -rf node_modules/.cache 💩.

✔️ This module has been tested to cause no issues in production environments.

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

Tools

• speed-measure-webpack-plugin

Always

• Nuxt config build.cache enabled
• Nuxt config build.parallel enabled - requires risky: true
• webpacks best practices for performance

Dev

• esbuild replaces babel-loader
• esbuild replaces ts-loader
• postcss-preset-env is disabled
• file-loader replaces url-loader
• Nuxt config build.hardsource enabled - requires risky: true

Production

• esbuild replaces Terser for minification

• ✔️ Nuxt v2
• ✔️ Nuxt bridge
• ⚠ Nuxt v3 Note: Vite needs to be disabled. You probably don't need this module.

Install the module.

yarn add nuxt-webpack-optimisations
# npm i nuxt-webpack-optimisations

Within your nuxt.config.ts or nuxt.config.js

buildModules: [
  'nuxt-webpack-optimisations',
],

For Nuxt config typescript support, add the module within your tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "nuxt-webpack-optimisations"
    ]
  }
}

All non-risky features are enabled by default, only hardsource and parallel are disabled.

If you'd like to get more performance than the default you can try

// nuxt.config.ts
export default {
  webpackOptimisations: {
    // hard source is the riskiest, if you have issues don't enable it
    hardSourcePlugin: process.env.NODE_ENV === 'development',
    parallelPlugin: process.env.NODE_ENV === 'development',
  }
}

Note: It's recommended to avoid running risky in non-development environments. Caching in CI environments can lead to issues.

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.

# Linux / Mac
rm -rf node_modules/.cache

# windows
rd /s  "node_modules/.cache"

If you'd like to see what features are running you can enable the debug mode.

// nuxt.config.ts
export default {
  webpackOptimisations: {
    debug: true
  }
}

Type: object

Default: Non-risky features enabled.

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

export default {
  webpackOptimisations: {
    features: {
      // Note: just an example of keys, these are all keys and their default
      postcssNoPolyfills: true,
      esbuildLoader: true,
      esbuildMinifier: true,
      imageFileLoader: true,
      webpackOptimisations: true,
      cacheLoader: true,
      hardSourcePlugin: false,
      parallelPlugin: false,
    }
  }
}

Type: object

Default:

export default {
  client: {
    target: 'es2015',
  },
  server: {
    target: 'node14',
  },
  modern: {
    target: 'es2015',
  },
}

See esbuild-loader.

Type: object

Default:

export default {
  client: {
    target: 'es2015',
  },
  server: {
    target: 'node14',
  },
  modern: {
    target: 'es2015',
  },
}

See esbuild-loader.

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.

webpackOptimisations: {
  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.

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.

webpackOptimisations: {
  measureMode: 'all'
}

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

webpackOptimisations: {
  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>

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

MIT License © 2022 Harlan Wilton