This package has been deprecated

    Author message:

    module has been renamed to nuxt-webpack-optimisations, see

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published


    builder npm package

    Instantly speed up your Nuxt.js v2 build times.


    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: 2-5x quicker cold starts, 🔥 almost instant hot starts (with "risky" profile)

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


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

    Safe (safest)

    Experimental (mostly safe)

    Risky (may throw errors)


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

    yarn add nuxt-build-optimisations
    npm i nuxt-build-optimisations

    ⚠️ This package makes optimisations with the assumption you're developing on the latest chrome.


    Within your nuxt.config.js add the following.

    // nuxt.config.js
    buildModules: [

    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
    rd /s  "node_modules/.cache"



    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.


    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.


      "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


    // 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


    Type: object or (args) => object


      target: 'es2015'

    See esbuild-loader.


    Type: object or (args) => object


      target: 'es2015'

    See esbuild-loader.


    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


      "experimentalDecorators": true
    <script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    export default class HelloWorld extends Vue {
      data () {
        return {
          hello: 'test'





    npm i nuxt-build-optimisations

    DownloadsWeekly Downloads






    Unpacked Size

    121 kB

    Total Files


    Last publish


    • harlan_zw