Nuxt application taking more than 4 minutes to compile

Question

I'm building a Nuxt application. I've done some research but found no definitive solution.

I've found a GitHub issue with something similar (https://github.com/nuxt/nuxt.js/issues/3486) but wasn't able to find a definitive solution:

It was compiling "normally", not taking more than 1 minute. I've just added around 300 lines of html to a Vue component. Suddenly went extremely low.

There are no explicit errors, alerts or warning messages, only the performance went extremely low. How to track this performance decrease?

So this is the nuxt.config.js file

const pkg = require('./package')
const webpack = require("webpack")

module.exports = {
  mode: 'universal',
  debug: true,
  prettify: false,
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    script: [
      { src: "https://cdn.jsdelivr.net/npm/sweetalert2@8" },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  buildDir: '../functions/nuxt',

  build:{
    publicPath: '/',
    vendor: ['axios','firebase', "jquery", 'popper', "bootstrap", 'bootbox'],
    extractCSS: true,
    babel: {
      presets: [
        'es2015',
        'stage-0'
      ],
      plugins: [

        [
          "transform-runtime",
          {
           "polyfill":true,
           "regenerator":true
          },
          "~/plugins/firebase.js",
          "~/plugins/bootboxPlugin.js"
        ],
        new webpack.ProvidePlugin({
          jQuery: 'jquery',
          $: 'jquery',
          jquery: 'jquery'
        })
      ]

    },
    prettify: false
  },
  /*
  ** Global CSS
  */
  css: [
    'bootstrap/dist/css/bootstrap.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [

  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    '@nuxtjs/pwa',
  ],

  /*
  ** Build configuration
  */

  build: {
    prettify: false,
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
      prettify = false
    }
  }
}

I'm not sure where the prettify : false directive should go, so I've tried in many places, because I'm not sure where the vueLoader is happening.

Also in the Nuxt documentation says

Note: This config has been removed since Nuxt 2.0, please use build.loaders.vue instead.

So this made me more confused. Where this build.loaders.vue is happening?

Answer 1

Its not nuxt fault. Blame the prettier. Here is issue that is causing this: https://github.com/prettier/prettier/issues/4784

Solutions:

1) Dont use large nested template, split it into several components -> thats a best solution from terms of code quality

2) Set prettify: false in the loaders options

https://nuxtjs.org/api/configuration-build/#loaders

https://github.com/vuejs/component-compiler-utils/blob/master/lib/compileTemplate.ts#L173

example nuxt config

export default {
  build: {
    loaders:  {
      vue: {
         prettify: false
      }
    }

  }
}