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"
}
}
fuente
vuetify-loader
tiene una serie de errores, por lo que decidimos usar la instalación vuetify completa sin variables SASS yvuetify-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 eliminarsass/variables.scss
hemos hecho que nuestra compilación sea rápida nuevamente.Respuestas:
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/framework
lugar devuetify/lib
puede acelerar esto un poco al incluir solo componentes usados en el paquete de desarrollo.fuente