Tiempos de compilación extremadamente largos con Vuetify 2.1 y Webpack


9

Estoy usando Vue CLI 3 y Vuetify 2.1 en un proyecto nuevo, y recientemente profundicé en anular las variables SASS de Vuetify . Después de finalmente ponerlo a trabajar, me di cuenta de que cada vez que modifico el variables.scssarchivo que creé y el proyecto se vuelve a compilar, toma cerca de 5 minutos terminar la compilación. Intenté actualizar el script package.json para aumentar la memoria que está usando Node, y aunque eso solucionó un error que recibía que causaba que la compilación se bloqueara, el resultado ahora es tiempos de compilación extremadamente lentos. El progreso que se muestra (estoy usando Foreman para ejecutar mi API de Rails y mi servidor Vue al mismo tiempo) se ve así:

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

Estos progresos se cargan, como mencioné, durante unos cinco minutos antes de que finalmente termine. Supongo que debido a que actualicé una variable, tiene que pasar y actualizar ese estilo para cada componente e instancia de esa variable en el nodo_módulo Vuetify.

Mi pregunta es si hay alguna forma de acelerar esto. ¿Tal vez he configurado algo mal que ha causado este problema? ¿O es esto totalmente normal y tendré que lidiar con eso?

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

Estoy experimentando problemas similares con el tiempo de compilación cuando configuro variables Sass como esta. También encontré a alguien más experimentando tiempos de construcción lentos aquí github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 . No diría que fue 'normal' en absoluto y estoy tratando de crear un caso de uso reducido ahora para plantear un problema en el vuetify github
mattGreenfield

Fantástico, gracias por la respuesta! Seguiré junto con ese problema y veré qué pasa con él. ¡Gracias de nuevo!
J. Jackson

1
Tener exactamente el mismo problema. Al eliminar el archivo de variables sass, todo vuelve a funcionar rápidamente.
Zaptree

1
He planteado un nuevo problema ya que he intentado todo y todavía es lento github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield

1
Tuvimos el mismo problema El tiempo de construcción tanto para el desarrollo como para la producción fue enorme. También vuetify-loadertiene una serie de errores, por lo que decidimos usar la instalación vuetify completa sin variables SASS y vuetify-loader. Los cambios son significativos: nuestro tiempo de construcción se redujo de 6 minutos a <2 minutos y el servidor de desarrollo se inicia en 15 segundos con una recarga en caliente bastante rápida. De todos modos, al eliminar sass/variables.scsshemos hecho que nuestra compilación sea rápida nuevamente.
Andriy Lach

Respuestas:


2

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

Esto inyecta una cantidad bastante grande de CSS en la parte superior de cada archivo sass, por lo que se repite un par de cientos de veces. El archivo de variables no debe contener ningún código que genere estilos reales, solo se permiten variables, mixins y funciones.

Sin embargo, más de 30 segundos al modificar el archivo de variables es normal, ya que adivinó que tiene que volver a compilar todo en ese caso. Importar desde en vuetify/lib/frameworklugar de vuetify/libpuede acelerar esto un poco al incluir solo componentes usados ​​en el paquete de desarrollo.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.