ভুটিফাই ২.১ এবং ওয়েবপ্যাকের সাথে অত্যন্ত দীর্ঘ সময় সংকলন

Question

আমি একটি নতুন-ইশ প্রকল্পে ভ্যু সিএলআই 3 এবং ভুটিফাই 2.1 ব্যবহার করছি এবং সম্প্রতি ভুটিফির এসএএসএস ভেরিয়েবলগুলিকে ওভাররাইড করার জন্য উদ্ভাসিত করেছি । অবশেষে এটি কাজ করার পরে, আমি বুঝতে পেরেছিলাম যে আমি variables.scssযখনই তৈরি করেছি এবং যখন ফাইলটি পুনরায় সংশোধন করেছিলাম তখন প্রতিবার সংকলন শেষ হতে 5 মিনিটের বেশি সময় লাগে। আমি নোড ব্যবহার করছে এমন মেমরিটি টুকরো টুকরো করার জন্য প্যাকেজ.জসন স্ক্রিপ্ট আপডেট করার চেষ্টা করেছি এবং যখন এটি একটি ত্রুটি সংশোধন করেছিল যা সংকলনটি ক্র্যাশ করেছিল, তখন ফলাফলটি অত্যন্ত ধীর সংকলনের সময়। যে অগ্রগতিটি দেখায় (আমি একই সাথে আমার রেলগুলি API এবং Vue সার্ভার উভয়ই চালাতে ফোরম্যান ব্যবহার করছি) এটি দেখতে এইরকম দেখাচ্ছে:

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

এই অগ্রগতিগুলি লোড যেমন শেষ পর্যন্ত শেষ হওয়ার প্রায় পাঁচ মিনিটের জন্য আমি উল্লেখ করেছি। আমার ধারণাটি হ'ল যেহেতু আমি একটি পরিবর্তনশীল আপডেট করেছি, ভুটিফাই নোড_মডিউলতে প্রতিটি উপাদান এবং উদাহরণের জন্য সেই স্টাইলটি আপডেট করতে হবে।

আমার প্রশ্ন এই গতি বাড়ানোর কোন উপায় আছে কিনা? হয়তো আমি কিছু ভুল সেট আপ করেছি যা এই সমস্যার কারণ হয়েছে? না এটি পুরোপুরি স্বাভাবিক এবং আমি কেবল এটির মোকাবেলা করব?

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 এ ধীরে ধীরে বিল্ড টাইমের অভিজ্ঞতাও পেয়েছি । আমি এটি একেবারেই 'স্বাভাবিক' বলব না এবং আমি এখন একটি কমে যাওয়া ব্যবহারের ঘটনাটি তৈরি করার চেষ্টা করছি যাতে গিথুব

— ম্যাটগ্রিনফিল্ড

চমত্কার, প্রতিক্রিয়া জন্য ধন্যবাদ! আমি এই সমস্যাটি বরাবর অনুসরণ করব এবং এটি কী হয়ে যায় তা দেখব। আবার ধন্যবাদ!

— জে জ্যাকসন

ঠিক একই সমস্যা হচ্ছে। সাস ভেরিয়েবল ফাইল সরানো সমস্ত কিছু আবার দ্রুত কাজ করে।

— Zaptree

আমি সবকিছু চেষ্টা করার সাথে সাথে আমি একটি নতুন ইস্যু উত্থাপন করেছি এবং এটি এখনও ধীর গিথুব

— ভিওটিফিজস

আমাদেরও একই সমস্যা ছিল। উভয় বিকাশের জন্য উত্পাদন সময় এবং উত্পাদন বিশাল ছিল। এর মধ্যে vuetify-loaderবেশ কয়েকটি বাগ রয়েছে তাই আমরা SASS ভেরিয়েবল এবং ছাড়াই পূর্ণ মূল্যবান ইনস্টলেশন ব্যবহার করার সিদ্ধান্ত নিয়েছি vuetify-loader। পরিবর্তনগুলি উল্লেখযোগ্য - আমাদের নির্মাণের সময়টি 6 মিনিট থেকে <2 মিনিটে হ্রাস পেয়েছে এবং বিকাশ সার্ভার 15 সেকেন্ডের মধ্যে বেশ দ্রুত গরম পুনরায় লোডিংয়ের সাথে শুরু হয়। যাইহোক, মোছার মাধ্যমে sass/variables.scssআমরা আমাদের বিল্ডটি আরও দ্রুত তৈরি করেছি।

— অ্যান্ড্রি লাচ

Answer 1

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

এটি প্রতিটি একক স্যাস ফাইলের শীর্ষে যথেষ্ট পরিমাণে সিএসএস ইনজেক্ট করে, তাই এটি কয়েকবার কয়েকবার পুনরাবৃত্তি হয়। ভেরিয়েবল ফাইলটিতে এমন কোনও কোড থাকা উচিত নয় যা প্রকৃত শৈলীর আউটপুট দেয় - কেবল ভেরিয়েবল, মিক্সিন এবং ফাংশন অনুমোদিত।

30+ সেকেন্ডে যখন ভেরিয়েবল ফাইলটি সংশোধন করা হয় তবে এটি স্বাভাবিক, আপনি যেমন অনুমান করেছিলেন যে সে ক্ষেত্রে সবকিছু পুনরায় সংকলন করতে হবে। vuetify/lib/frameworkপরিবর্তে থেকে আমদানি vuetify/libকরা কেবলমাত্র ডি বান্ডলে ব্যবহৃত উপাদানগুলি অন্তর্ভুক্ত করে কিছুটা গতি বাড়িয়ে তুলতে পারে।