nuxt.config.js

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文档中说 Note: This config has been removed since Nuxt 2.0, please use build.loaders.vue instead.

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

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

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的支持

Answer 1

这不是nuxt错误。怪漂亮的。这是导致此问题的原因：https://github.com/prettier/prettier/issues/4784

解决方案：

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

2）在prettify: false选项

中设置loaders

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

def is_power(a, b):
    if a == b:
        return True
    elif a % b == 0:
        a = a/b
        return is_power(a, b)
    else:
        return False

感谢@Aldarund的支持。

Nuxt应用程序需要花费超过4分钟的时间进行编译

nuxt.config.js

2 个答案:

nuxt.config.js