Nuxt应用程序编译耗时超过4分钟
我正在构建一个Nuxt应用程序。我做了一些研究，但没有找到明确的解决方案。
我发现了一个类似(https://github.com/nuxt/nuxt.js/issues/3486)的GitHub问题，但找不到明确的解决方案：
它正在编译“正常”，不超过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文档中也提到
注意:此配置已从Nuxt2.0删除，请改用build.loaders.vue。
所以这让我更加困惑。这个build.loaders.vue发生在哪里？
回答 2
Stack Overflow用户
发布于 2019-05-29 07:34:43
这不是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
}
}
}
}Stack Overflow用户
发布于 2019-08-16 04:33:07
(代表问题作者张贴，将其移动到答案空间)。
所以最终的解决方案是
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的支持。
https://stackoverflow.com/questions/56350912
复制相似问题