Vuetify 2.1 ve Webpack ile son derece uzun derleme süreleri


9

Vue CLI 3 ve Vuetify 2.1'i yeni bir ish projesinde kullanıyorum ve son zamanlarda Vuetify'ın SASS değişkenlerini geçersiz kılmak için araştırdım . Sonunda çalışmaya başladıktan sonra, variables.scssoluşturduğum dosyayı her değiştirdiğimde ve proje yeniden derlediğinde, derlemeyi bitirmek 5 dakika kadar sürdüğünü fark ettim . Düğümün kullandığı belleği vurmak için package.json komut dosyasını güncellemeyi denedim ve bu derlemenin çökmesine neden olan bir hata giderildi, sonuç artık son derece yavaş derleme süreleri. (Foreman'ı Rails API ve Vue sunucumu aynı anda çalıştırmak için kullanıyorum) şu şekilde görünüyor:

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

Bahsettiğim gibi, bu ilerlemeler, nihayet bitmeden yaklaşık beş dakika boyunca ilerler. Benim tahminim, bir değişkeni güncellediğimden, Vuetify node_module'deki değişkenin her bileşeni ve örneği için bu stili gözden geçirmesi ve güncellemesi gerekiyor.

Benim sorum, bunu hızlandırmanın bir yolu var mı? Belki bu soruna neden olan yanlış bir şey ayarladım? Yoksa bu tamamen normal mi ve bununla başa çıkmak zorunda mıyım?

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

Böyle Sass değişkenleri ayarlarken inşa süresi ile benzer sorunlar yaşıyorum. Ayrıca burada github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 yavaş inşa süreleri yaşayan başka birini buldum . Ben hiç 'normal' olduğunu söyleyemem ve şimdi vuetify github
mattGreenfield

Fantastik, cevap için teşekkürler! Bu konuyu takip edeceğim ve ne olacağını göreceğim. Tekrar teşekkürler!
J. Jackson

1
Aynı sorunu yaşıyor. Sass değişkenleri dosyasını kaldırmak her şeyin tekrar hızlı çalışmasını sağlar.
Zaptree

1
Her şeyi denediğim için yeni bir sorun çıkardım ve hala yavaş github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield

1
Aynı sorun yaşadık. Hem geliştirme hem de üretim için inşa süresi çok büyüktü. Ayrıca vuetify-loaderçok sayıda hata var, bu yüzden SASS değişkenleri olmadan tam vuetify kurulumunu kullanmaya karar verdik ve vuetify-loader. Değişiklikler önemli - yapım süremiz 6 dakikadan 2 dakikaya düşürüldü ve geliştirme sunucusu 15 saniye içinde oldukça hızlı bir şekilde yeniden yükleme ile başlıyor. Her neyse, silerek sass/variables.scssyapımızı tekrar hızlı hale getirdik.
Andriy Lach

Yanıtlar:


2

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

Bu, her bir sass dosyasının üstüne oldukça büyük miktarda CSS enjekte eder, böylece birkaç yüz kez tekrarlanır. Değişkenler dosyası, gerçek stilleri çıkaran kod içermemelidir; yalnızca değişkenlere, karışımlara ve işlevlere izin verilir.

Değişkenler dosyasını değiştirirken 30 saniyeden fazla bir süre normaldir, ancak tahmin edersiniz ki bu durumda her şeyi yeniden derlemek zorundadır. vuetify/lib/frameworkBunun yerine içe aktarmak vuetify/lib, yalnızca geliştirici paketine kullanılmış bileşenleri dahil ederek bunu hızlandırabilir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.