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.scss
archivo 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"
}
}
vuetify-loader
tiene 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.scss
hemos hecho que nuestra compilación sea rápida nuevamente.