Приложение Nuxt компилируется более 4 минут
Я создаю приложение Nuxt. Я провел некоторое исследование, но не нашел окончательного решения.
Я нашел похожую проблему на GitHub (https://github.com/nuxt/nuxt.js/issues/3486), но не смог найти окончательного решения:
Компилировался "нормально", не более 1 минуты. Я только что добавил около 300 строк html в компонент Vue. Внезапно пошел очень низко.
Явных ошибок, оповещений или предупреждающих сообщений нет, только производительность стала крайне низкой. Как отследить это снижение производительности?
Итак, это файл 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?
Ответы 2
Это не вина. Виноват тот, кто красивее. Вот проблема, которая вызывает это: 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
пример нуст конфига
export default {
build: {
loaders: {
vue: {
prettify: false
}
}
}
}
@AdrielWerlich, если вы читаете связанный документ nuxt, вы должны увидеть, куда он должен идти ... Я обновил свой ответ. Но я настоятельно рекомендую пойти по пути 1. Также использование jquery в nuxt porject тоже плохая идея.
@Aldarund - если использование Jquery в Nuxt - плохая идея, ответ должен быть не «не используйте jquery», а «Nuxt должен интегрировать jquery». Из всех фреймворков, которые я создал для веб-приложений производственного уровня, до сегодняшнего дня НИ ОДНА ДУША не пришла к созданию такого мощного плагина, как jquery.
Что именно делает настройка prettify: false?
(Размещено от имени автора вопроса, чтобы переместить его в пространство для ответов).
Итак, окончательное решение таково
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 за поддержку.
Привет, @Aldarun, где в файле nuxt.config.js должно быть красиво: должно идти false? Я отредактировал свой вопрос, чтобы показать файл nuxt.config.js. Я поставил prettify false во всех местах, которые смог найти, но время сборки все равно очень медленное...