title: Nuxt application taking more than 4 minutes to compile
body: <p>I'm building a Nuxt application. I've done some research but found no definitive solution.</p>
  
  <p>I've found a GitHub issue with something similar (<a href="https://github.com/nuxt/nuxt.js/issues/3486" rel="noreferrer">https://github.com/nuxt/nuxt.js/issues/3486</a>) but wasn't able to find a definitive solution:</p>
  
  <p><a href="https://i.stack.imgur.com/v4fsE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v4fsE.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>There are no explicit errors, alerts or warning messages, only the performance went extremely low. How to track this performance decrease?</p>
  
  <p>So this is the nuxt.config.js file </p>
  
  <pre><code>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
      }
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Also in the Nuxt documentation says</p>
  
  <blockquote>
    <p>Note: This config has been removed since Nuxt 2.0, please use build.loaders.vue instead.</p>
  </blockquote>
  
  <p>So this made me more confused. Where this build.loaders.vue is happening? </p>