This package has been deprecated

    Author message:

    module has been renamed to nuxt-webpack-optimisations, see https://github.com/harlan-zw/nuxt-webpack-optimisations/releases/tag/2.0.0

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

    1.0.7 • Public • Published

    nuxt-build-optimisations

    builder npm package

    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: 2-5x quicker cold starts, 🔥 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)

    Experimental (mostly safe)

    Risky (may throw errors)

    Setup

    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.


    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

    License

    MIT

    Install

    npm i nuxt-build-optimisations

    DownloadsWeekly Downloads

    3,333

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    121 kB

    Total Files

    5

    Last publish

    Collaborators

    • harlan_zw