Extrem lange Kompilierungszeiten mit Vuetify 2.1 und Webpack

9

Ich verwende Vue CLI 3 und Vuetify 2.1 in einem neuen Projekt und habe mich kürzlich mit dem Überschreiben der SASS-Variablen von Vuetify befasst . Nachdem ich es endlich zum Laufen gebracht hatte, stellte ich fest, dass es jedes Mal, wenn ich die von variables.scssmir erstellte Datei ändere und das Projekt neu kompiliere, fast 5 Minuten dauert, bis die Kompilierung abgeschlossen ist. Ich habe versucht, das Skript package.json zu aktualisieren, um den von Node verwendeten Speicher zu erweitern, und während dadurch ein Fehler behoben wurde, der zum Absturz der Kompilierung führte, sind die Kompilierungszeiten jetzt extrem langsam. Der angezeigte Fortschritt (ich verwende Foreman, um sowohl meine Rails-API als auch meinen Vue-Server gleichzeitig auszuführen) sieht folgendermaßen aus:

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

Diese Fortschritte werden, wie bereits erwähnt, etwa fünf Minuten lang geladen, bevor sie schließlich beendet werden. Ich vermute, dass ich, weil ich eine Variable aktualisiert habe, diesen Stil für jede Komponente und Instanz dieser Variablen im Vuetify-Knotenmodul durchlaufen und aktualisieren muss.

Meine Frage ist, ob es eine Möglichkeit gibt, dies zu beschleunigen? Vielleicht habe ich etwas falsch eingestellt, das dieses Problem verursacht hat? Oder ist das ganz normal und ich muss mich nur darum kümmern?

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"
  }
}
J. Jackson
quelle
Beim Festlegen solcher Sass-Variablen treten ähnliche Probleme mit der Erstellungszeit auf. Ich habe auch jemanden gefunden, der langsame Build-Zeiten hat. Github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 . Ich würde nicht sagen, dass es überhaupt "normal" war und ich versuche jetzt, einen reduzierten Anwendungsfall zu erstellen, um ein Problem auf dem vuetify github
mattGreenfield
Fantastisch, danke für die Antwort! Ich werde diesem Thema folgen und sehen, was daraus wird. Danke noch einmal!
J. Jackson
1
Genau das gleiche Problem haben. Durch das Entfernen der Sass-Variablendatei funktioniert alles wieder schnell.
Zaptree
1
Ich habe ein neues Problem angesprochen, da ich alles ausprobiert habe und es immer noch langsam ist. Github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield
1
Wir hatten das gleiche Problem. Die Bauzeit für Entwicklung und Produktion war enorm. vuetify-loaderHat auch eine Reihe von Fehlern, so dass wir uns entschieden haben, die vollständige vuetify-Installation ohne SASS-Variablen und zu verwenden vuetify-loader. Änderungen sind erheblich - unsere Erstellungszeit wurde von 6 Minuten auf <2 Minuten reduziert und der Entwicklungsserver startet in 15 Sekunden mit einem recht schnellen Hot-Reloading. Wie auch immer, durch das Löschen haben sass/variables.scsswir unseren Build wieder schnell gemacht.
Andriy Lach

Antworten:

2

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

Dadurch wird eine ziemlich große Menge an CSS in jede einzelne Sass-Datei eingefügt, sodass sie einige hundert Mal wiederholt wird. Die Variablendatei sollte keinen Code enthalten, der tatsächliche Stile ausgibt. Es sind nur Variablen, Mixins und Funktionen zulässig.

30+ Sekunden beim Ändern der Variablendatei sind jedoch normal, da Sie vermutet haben, dass in diesem Fall alles neu kompiliert werden muss. Das Importieren von vuetify/lib/frameworkstatt vuetify/libkann dies etwas beschleunigen, indem nur gebrauchte Komponenten in das Entwicklungspaket aufgenommen werden.

Kael Watts-Deuchar
quelle