Temps de compilation extrêmement longs avec Vuetify 2.1 et Webpack

9

J'utilise Vue CLI 3 et Vuetify 2.1 dans un nouveau projet et j'ai récemment exploré les variables SASS de Vuetify . Après l'avoir finalement fait fonctionner, j'ai réalisé que chaque fois que je modifiais le variables.scssfichier que j'avais créé et que le projet se recompilait, il fallait près de 5 minutes pour terminer la compilation. J'ai essayé de mettre à jour le script package.json pour augmenter la mémoire que Node utilise, et bien que cela ait corrigé une erreur que je recevais qui provoquait le crash de la compilation, le résultat est maintenant des temps de compilation extrêmement lents. La progression qui s'affiche (j'utilise Foreman pour exécuter à la fois mon API Rails et mon serveur Vue en même temps) ressemble à ceci:

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

Ces progrès se chargent, comme je l'ai mentionné, pendant environ cinq minutes avant qu'il ne se termine enfin. Je suppose que parce que j'ai mis à jour une variable, il faut passer par et mettre à jour ce style pour chaque composant et instance de cette variable dans le node_module Vuetify.

Ma question est de savoir s'il existe un moyen d'accélérer cela? J'ai peut-être mal réglé quelque chose qui a causé ce problème? Ou est-ce totalement normal et je vais devoir y faire face?

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
la source
Je rencontre des problèmes similaires avec le temps de construction lors de la définition de variables Sass comme ceci. J'ai également trouvé quelqu'un d'autre connaissant des temps de construction lents ici github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 . Je ne dirais pas que c'était `` normal '' du tout et j'essaie de créer un cas d'utilisation réduit maintenant pour soulever un problème sur le vuetify github
mattGreenfield
Fantastique, merci pour la réponse! Je vais suivre cette question et voir ce qu'il en adviendra. Merci encore!
J. Jackson
1
Avoir exactement le même problème. La suppression du fichier de variables sass fait que tout fonctionne à nouveau rapidement.
Zaptree
1
J'ai soulevé un nouveau problème car j'ai tout essayé et c'est toujours lent github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield
1
Nous avons eu le même problème. Le temps de construction pour le développement et la production était énorme. A également vuetify-loaderun certain nombre de bogues, nous avons donc décidé d'utiliser l'installation complète vuetify sans les variables SASS et vuetify-loader. Les changements sont importants - notre temps de construction est passé de 6 min à <2 min et le serveur de développement démarre en 15 secondes avec un rechargement à chaud assez rapide. Quoi qu'il en soit, en supprimant, sass/variables.scssnous avons de nouveau accéléré notre build.
Andriy Lach

Réponses:

2

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

Cela injecte une quantité assez importante de CSS dans le haut de chaque fichier sass, il est donc répété quelques centaines de fois. Le fichier de variables ne doit pas contenir de code qui génère des styles réels - seules les variables, les mixins et les fonctions sont autorisés.

Cependant, 30+ secondes lors de la modification du fichier de variables sont normales, car vous avez deviné qu'il doit tout recompiler dans ce cas. L'importation depuis vuetify/lib/frameworkau lieu de vuetify/libpeut accélérer quelque peu cela en n'incluant que les composants utilisés dans le bundle de développement.

Kael Watts-Deuchar
la source