Extrem lange Kompilierungszeiten mit Vuetify 2.1 und Webpack

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"
  }
}

@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.