Nuxt.js: Increase the Build Speed

[nahtnam]

What problem does this feature solve?

Hello,

Recently I've been checking out Next.JS and I've found that it is more than 10-20x faster in the initial server startup time under very similar conditions. I'm not sure what they do exactly but sass compiles almost instantly.

NOTE: This is with Bulma installed (manually)

What does the proposed changes look like?

Optimizing webpack?

_{This feature request is available on Nuxt community (#c8750)}

[manniL]

There are several experimental ways of improving build speed.

https://nuxtjs.org/api/configuration-build#parallel
https://nuxtjs.org/api/configuration-build#cache
https://nuxtjs.org/api/configuration-build#hardsource

We are constantly trying to increase the build speed with updates.

As this issue is quite broad, I'll close it.
If you have any specific ideas, please feel free to open up another issue.

[nahtnam]

Wow, those three settings took the initial build times from 1+ minutes to 3 seconds (after the first run). Maybe these settings should be covered in the FAQ or a more accessible location?

[simplenotezy]

@nahtnam can you share what your build configuration looked like, after you tweaked it?

[dan-online]

After coming here I found builds sped up by 20s using these techniques which was quite helpful although I did run into a bug:

   │   The command 'nuxt build' finished but did not exit after 5s                        │
   │   This is most likely not caused by a bug in Nuxt.js                                 │
   │   Make sure to cleanup all timers and listeners you or your plugins/modules start.   │
   │   Nuxt.js will now force exit                                                        │

[Switcher05]

The error also says " DeprecationWarning: Starting with Nuxt version 3 this will be a fatal error"
Is there a correct way to set up the build to avoid this?

[gkatsanos]

Hey everyone, I followed the recommendations and added the above options and our build time increased by some minutes.
I'm posting the config here in case someone sees something fishy (it's so slow we're considering to jump ship to a new framework)

import config from './config/env'
import PROXIES from './constants/proxies'

require('dotenv').config()

const isProd = process.env.NODE_ENV === 'production'
const { stage, publicPath, sentryAuthToken } = config

export default {
  /*
   ** Headers of the page
   */
  head: {
    htmlAttrs: {
      itemscope: '',
      itemtype: 'http://schema.org/WebPage',
    },
    title: '',
    meta: [
      { charset: 'utf-8' },
      { content: 'IE=edge', 'http-equiv': 'X-UA-Compatible' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=2.0',
      },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [
      { rel: 'preconnect', href: '//wlw.cdn.warpcache.net' },
      { rel: 'preconnect', href: '//browser-update.org' },
      { rel: 'preconnect', href: '//googletagmanager.com' },
      { rel: 'preconnect', href: '//google-analytics.com' },
      { rel: 'preconnect', href: '//www.google.com' },
      { rel: 'preconnect', href: '//assets.adobedtm.com' },
    ],
  },
  router: {
    middleware: ['i18n'],
  },
  /*
   ** Customize the progress-bar color
   */
  loading: false,
  loadingIndicator: {
    name: 'fading-circle',
    color: '#949799',
    background: 'white',
  },
  /*
   ** Global CSS
   */
  css: ['@/assets/styles/style.scss', '@/assets/styles/print.scss', 'vue-slick-carousel/dist/vue-slick-carousel.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/polyfills',
    '@/plugins/i18n',
    '@/plugins/axios',
    '@/plugins/global',
    '@/plugins/filters',
    '@/plugins/routing',
    '@/plugins/googleOptimize',
    '@/plugins/veeValidate',
    { src: '@/plugins/botPixel', mode: 'client' },
    { src: '@/plugins/imgix', mode: 'client' },
    { src: '@/plugins/lazysizes', mode: 'client' },
    { src: '@/plugins/tracking', mode: 'client' },
    { src: '@/plugins/hotjar', mode: 'client' },
    { src: '@/plugins/svg4everybody', mode: 'client' },
    { src: '@/plugins/vueClipboard2', mode: 'client' },
    { src: '@/plugins/vTooltip', mode: 'client' },
  ],
  /*
   ** Nuxt.js modules
   */
  buildModules: [
    // Docs: https://github.com/nuxt-community/dotenv-module
    ['@nuxtjs/dotenv', { systemvars: true }],
    // Docs: https://github.com/nuxt-community/style-resources-module#user-content-scss-example
    '@nuxtjs/style-resources',
    // Docs : https://github.com/juliomrqz/nuxt-optimized-images
    '@aceforth/nuxt-optimized-images',
    // Docs : https://github.com/nuxt-community/svg-module
    '@nuxtjs/svg',
    // Docs: https://github.com/nuxt-community/stylelint-module
    '@nuxtjs/stylelint-module',
  ],
  modules: [
    // Docs: https://jira.visable.com/browse/PIT-1019
    '@/modules/keepAliveTimeout.js',
    ['~/modules/datadog'],
    // Docs: https://github.com/nuxt-community/router-module#user-content-usage
    ['@nuxtjs/router', { keepDefaultRouter: false }],
    // Docs: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Docs: https://github.com/microcipcip/cookie-universal/tree/master/packages/cookie-universal-nuxt#user-content-api
    'cookie-universal-nuxt',
    // Docs: https://github.com/nuxt-community/device-module
    '@nuxtjs/device',
    // Docs: https://github.com/nuxt-community/sentry-module
    '@nuxtjs/sentry',
    // Docs: https://github.com/Timkor/nuxt-polyfill
    'nuxt-polyfill',
    // Docs: https://portal-vue.linusb.org/guide/installation.html#cdn
    'portal-vue/nuxt',
    // Docs: https://github.com/nuxt-community/robots-module
    '@nuxtjs/robots',
  ],
  optimizedImages: {
    inlineImageLimit: -1,
    handleImages: ['png', 'webp'],
    defaultImageLoader: 'img-loader',
    optimizeImagesInDev: false,
    optimizeImages: true,
    webp: {
      quality: 85,
    },
  },
  axios: {
    proxy: true,
  },
  robots: {
    UserAgent: '*',
    Allow: ['/en/home$', '/fr/home$'],
    Disallow: [
      '/extern/adm-images/',
      '/sse/',
      '/firmen/',
      '/internal_api/',
      '/picture500/',
      '/en/',
      '/fr/',
      '/de/nachrichten/anfrage/',
      '*/produkte*?*',
    ],
  },
  proxy: isProd ? {} : PROXIES,
  styleResources: {
    scss: ['@/assets/styles/mixins/_breakpoints.scss', '@wlw/styleguide/_utils.scss'],
  },
  polyfill: {
    features: [
      {
        require: 'array-from',
        detect: () => !Array.from,
      },
    ],
  },
  /*
   ** Build configuration
   */
  build: {
    parallel: true,
    hardSource: true,
    cache: true,
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              buildTarget: isServer ? 'server' : 'client',
              corejs: { version: 3 },
            },
          ],
        ]
      },
    },
    transpile: ['@visable-vue', 'vee-validate/dist/rules', 'v-tooltip'],
    publicPath,
    extend(nuxtConfig, { isDev, isClient }) {
      nuxtConfig.module.rules.push({
        test: /\.(jpe?g|gif)$/i,
        loader: 'file-loader',
        query: {
          name: 'assets/[name].[hash:8].[ext]',
        },
      })

      nuxtConfig.module.rules.push({
        test: /\.ico$/,
        loader: 'url-loader',
        query: {
          limit: 1000,
          name: 'img/[name].[hash:8].[ext]',
        },
      })

      if (isDev && isClient) {
        // Run ESLint on save
        nuxtConfig.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }
    },
  },
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => ['script', 'style', 'font'].includes(type),
    },
    resourceHints: true,
  },
  server: {
    port: (!isProd && process.env.DEV_PORT) || 3000,
    host: '0.0.0.0', // default: localhost
  },
  sentry: {
    dsn: sentryAuthToken,
    publishRelease: true,
    sourceMapStyle: 'hidden-source-map',
    attachCommits: true,
    config: {
      environment: stage,
      release: process.env.CI_COMMIT_SHORT_SHA,
    },
  },
}

[danielroe]

@gkatsanos I would recommend loading some of the plugins and modules only in production mode so you aren't loading them in dev.

I'd also recommend finding a solution for your images that doesn't rely on reoptimising them each build. For example, a service that will do that for you, or even just committing the optimised images to version control.

[pi0]

Keeps alive, sentry and data dog seem sus to keep open handles..

[gkatsanos]

Keeps alive, sentry and data dog seem sus to keep open handles..

could you elaborate?