Nuxt 应用程序编译耗时超过 4 分钟

Question

我正在构建一个 Nuxt 应用程序。我做了一些研究，但没有找到明确的解决方案。

我发现了一个类似的 GitHub 问题 (https://github.com/nuxt/nuxt.js/issues/3486)，但无法找到明确的解决方案：

它正在“正常”编译，不超过 1 分钟。我刚刚向 Vue 组件添加了大约 300 行 html。突然变得非常低。

没有明确的错误、警报或警告消息，只有性能极低。如何跟踪这种性能下降？

所以这是 nuxt.config.js 文件

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

我不确定 prettify : false 指令应该去哪里，所以我在很多地方都试过了，因为我不确定 vueLoader 发生在哪里。

也在 Nuxt 文档中说

注意：自 Nuxt 2.0 以来，此配置已被删除，请改用 build.loaders.vue。

所以这让我更加困惑。这个 build.loaders.vue 发生在哪里？

Answer 1

这不是 nuxt 错误。责备更漂亮的人。这是导致此问题的问题：https://github.com/prettier/prettier/issues/4784

解决方案：

1) 不要使用大型嵌套模板，将其拆分为多个组件 -> 从代码质量方面来说这是最好的解决方案

2) 在loaders 选项中设置prettify: false

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

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

nuxt 配置示例

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

  }
}

Answer 2

（代表问题作者发布，将其移至答案空间）。

所以最终的解决方案是这样的

nuxt.config.js

module.exports { //or export default {

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",
          
          new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
          })
        ],
        
      ]

    },
    // adding the below object made the compilation time go up again to 
    //"normal" 
    loaders:  {
      vue: {
        prettify: false
      }
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
      
    }
  }

}

感谢@Aldarund 的支持。