Vuetify 2.1 और Webpack के साथ बहुत लंबा संकलन समय

Question

मैं एक नई-ईश परियोजना में Vue CLI 3 और Vuetify 2.1 का उपयोग कर रहा हूं, और हाल ही में Vuetify के SASS वेरिएबल्स को ओवरराइड करने में देरी हुई । आखिरकार इसे काम करने के बाद, मुझे एहसास हुआ कि हर बार मैं इसे संशोधित करता हूंvariables.scss जब मैंने बनाई गई फ़ाइल को और परियोजना को फिर से शुरू किया, तो संकलन को पूरा करने में 5 मिनट के करीब लगता है। मैंने Node का उपयोग करने वाली मेमोरी को टक्कर देने के लिए package.json स्क्रिप्ट को अपडेट करने की कोशिश की है, और उस त्रुटि को ठीक करते समय मुझे प्राप्त हो रहा था जो दुर्घटना का कारण बन गया था, परिणाम अब बेहद धीमा संकलन समय है। प्रगति जो दिखाती है (मैं एक ही समय में मेरे रेल एपीआई और वीयू सर्वर दोनों को चलाने के लिए फोरमैन का उपयोग कर रहा हूं) इस तरह दिखता है:

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

यह प्रगति को लोड करता है, जैसा कि मैंने उल्लेख किया है, अंत में समाप्त होने से पहले लगभग पांच मिनट के लिए। मेरा अनुमान यह है कि क्योंकि मैंने एक चर को अद्यतन किया है, इसलिए यह उस शैली के प्रत्येक घटक और उदाहरण के लिए Vuetify node_module में उस चर के उदाहरण के माध्यम से अद्यतन करना है।

मेरा सवाल यह है कि क्या इसमें तेजी लाने का कोई तरीका है? शायद मैंने कुछ गलत सेट किया है जिससे यह समस्या हुई है? या यह पूरी तरह से सामान्य है और मुझे इससे निपटना होगा?

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

Comments

मैं इसी तरह की समस्याओं का सामना कर रहा हूँ जब इस तरह से सास चर सेट करते समय। मैंने यह भी पाया कि किसी और को यहाँ धीमी गति के निर्माण का अनुभव हो रहा है github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 । मैं यह नहीं कहूंगा कि यह बिल्कुल 'सामान्य' था और मैं अब कम उपयोग के मामले को बनाने की कोशिश कर रहा हूं ताकि vuetify github पर एक मुद्दा उठाया जा सके

— मैटग्रीनफील्ड

शानदार, प्रतिक्रिया के लिए धन्यवाद! मैं उस मुद्दे का पालन करूंगा और देखूंगा कि वह क्या बन जाता है। एक बार फिर धन्यवाद!

— जे। जैक्सन

एक ही मुद्दा होने। Sass वैरिएबल फ़ाइल को हटाने से सब कुछ फिर से तेजी से काम करता है।

— ज़ाप्री

मैंने एक नया मुद्दा उठाया है क्योंकि मैंने सब कुछ करने की कोशिश की है और यह अभी भी धीमा है github.com/vuetifyjs/vuetify-loader/issues/95

— मैटग्रीनफील्ड

हमारी भी यही समस्या थी। विकास और उत्पादन दोनों का समय बहुत बड़ा था। इसके अलावा vuetify-loaderकई बग हैं, इसलिए हमने SASS चर के बिना पूर्ण vuetify स्थापना का उपयोग करने का निर्णय लिया और vuetify-loader। परिवर्तन महत्वपूर्ण हैं - हमारा निर्माण समय 6min से घटाकर <2min हो जाता है और विकास सर्वर 15 सेकंड में काफी तेज गर्म लोडिंग के साथ शुरू होता है। वैसे भी, हटाकर sass/variables.scssहमने अपना निर्माण फिर से तेज कर दिया है।

— एंड्री लाक

Answer 1

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

यह सीएसएस की एक बड़ी मात्रा को हर एक sass फ़ाइल के शीर्ष पर इंजेक्ट करता है, इसलिए यह एक सौ बार दोहराया जाता है। चर फ़ाइल में कोई भी कोड नहीं होना चाहिए जो वास्तविक शैलियों को आउटपुट करता है - केवल चर, मिश्रण और फ़ंक्शन की अनुमति है।

हालांकि, चर फ़ाइल को संशोधित करते समय 30+ सेकंड सामान्य है, जैसा कि आपने अनुमान लगाया है कि उसे उस मामले में सब कुछ पुनः प्राप्त करना होगा। vuetify/lib/frameworkइसके बजाय से आयात करना vuetify/libकुछ हद तक केवल देव बंडल में इस्तेमाल किए गए घटकों को शामिल करके गति प्रदान कर सकता है।