Tempi di compilazione estremamente lunghi con Vuetify 2.1 e Webpack


9

Sto usando Vue CLI 3 e Vuetify 2.1 in un nuovo progetto e recentemente ho approfondito la necessità di scavalcare le variabili SASS di Vuetify . Dopo averlo finalmente fatto funzionare, mi sono reso conto che ogni volta che modifico il variables.scssfile che ho creato e il progetto si ricompila, ci vogliono quasi 5 minuti per completare la compilazione. Ho provato ad aggiornare lo script package.json per aumentare la memoria utilizzata da Node, e mentre quello risolto un errore che stavo ricevendo che causava l'arresto anomalo della compilazione, il risultato è ora tempi di compilazione estremamente lenti. I progressi che mostrano (sto usando Foreman per eseguire contemporaneamente la mia API Rails e il server Vue) sono i seguenti:

17:47:29 web.1  | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass

Questi progressi si caricano, come ho già detto, per circa cinque minuti prima che finisca. La mia ipotesi è che, poiché ho aggiornato una variabile, deve passare attraverso e aggiornare quello stile per ciascun componente e istanza di quella variabile nel modulo_modulo Vuetify.

La mia domanda è se c'è un modo per accelerare questo? Forse ho sbagliato qualcosa che ha causato questo problema? O è del tutto normale e dovrò occuparmene?

main.js

import Vue from 'vue';

import App from './App.vue';
import { router } from './router';
import store from './_store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app');

vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light: {
        primary: '#4A90E2',
        darkPrimary: '#3B73B4',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#a70000',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        teal: '#64EBC6',
        green: '#7ED321',
        darkGreen: '#4c8f1d',
        lightGrey: 'rgba(0,0,0,0.12)',
        darkGrey: '#4A4A4A',
        textSecondary: 'rgba(0,0,0,0.4)',
      },
    },
  },
  icons: {
    iconfont: 'md',
  },
});

variables.scss

// Globals
$border-radius-root: 2px;
// $font-size-root: 14px;
$body-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $main-font comes from my own ./_variables.scss.
$heading-font-family: 'Avenir Next', 'Lato', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; // $title-font comes from my own ./_variables.scss.

$headings: (
  'h1': (
    'size': 3.3125rem,
    'line-height': 1.15em
  ),
  'h2': (
    'size': 2.25rem,
    'line-height': 1.5em,
  ),
  'h3': (
    'size': 1.5625rem,
    'line-height': 1.4em
  ),
  'h4': (
    'size': 1.125rem,
    'line-height': 1.4em
  ),
  'h5': (
    'size': 1.0625rem
  ),
  'h6': (
    'size': .75rem
  ),
  'subtitle-2': (
    'size': 1rem
  ),
  'overline': (
    'letter-spacing': 0
  )
);

@import '~vuetify/src/styles/settings/variables';

// V-Btn
$btn-letter-spacing: 1px;
@import '~vuetify/src/components/VBtn/_variables';

@import '~vuetify/src/styles/main.sass';

package.json

{
  "name": "myProject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "dayjs": "^1.8.16",
    "echarts": "^4.3.0",
    "fibers": "^4.0.1",
    "material-design-icons-iconfont": "^5.0.1",
    "sass": "^1.23.0",
    "sass-loader": "7.1.0",
    "vee-validate": "^3.0.11",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuedraggable": "^2.23.2",
    "vuetify": "^2.1.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-vuetify": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

Sto riscontrando problemi simili con il tempo di costruzione quando si impostano le variabili Sass in questo modo. Ho anche trovato qualcun altro che sta vivendo tempi di compilazione lenti qui github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 . Non direi che era "normale" e sto provando a creare un caso d'uso ridotto ora per sollevare un problema sul vuetify github
mattGreenfield

Fantastico, grazie per la risposta! Seguirò il problema e vedrò cosa ne sarà. Grazie ancora!
J. Jackson,

1
Avere lo stesso identico problema. La rimozione del file delle variabili sass fa sì che tutto funzioni di nuovo velocemente.
Zaptree,

1
Ho sollevato un nuovo problema poiché ho provato di tutto ed è ancora lento github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield

1
Abbiamo avuto lo stesso problema. I tempi di costruzione sia per lo sviluppo che per la produzione sono stati enormi. Ha anche vuetify-loaderuna serie di bug, quindi abbiamo deciso di utilizzare l'installazione di vuetify completa senza variabili SASS e vuetify-loader. Le modifiche sono significative: il nostro tempo di costruzione è stato ridotto da 6 minuti a <2 minuti e il server di sviluppo si avvia in 15 secondi con una ricarica a caldo abbastanza veloce. Ad ogni modo, eliminando sass/variables.scssabbiamo reso di nuovo veloce la nostra build.
Andriy Lach,

Risposte:


2

@import '~vuetify/src/styles/main.sass';

Questo inietta una quantità abbastanza grande di CSS nella parte superiore di ogni singolo file sass, quindi viene ripetuto un paio di centinaia di volte. Il file delle variabili non deve contenere alcun codice che generi stili effettivi: sono consentite solo variabili, mixin e funzioni.

Più di 30 secondi quando si modifica il file delle variabili è comunque normale, come hai intuito che deve ricompilare tutto in quel caso. L'importazione da vuetify/lib/frameworkinvece di vuetify/libpuò accelerare leggermente includendo solo i componenti usati nel bundle di sviluppo.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.