Vuetify 2.1 및 Webpack으로 컴파일 시간이 매우 길다

새로운 프로젝트에서 Vue CLI 3 및 Vuetify 2.1을 사용하고 있으며 최근 Vuetify의 SASS 변수 를 재정의 했습니다 . 마침내 작동시킨 후, 내가 variables.scss만든 파일을 수정 하고 프로젝트를 다시 컴파일 할 때마다 컴파일을 마치는 데 5 분 정도 걸립니다. Node. 사용중인 메모리를 늘리기 위해 package.json 스크립트를 업데이트하려고 시도했지만 컴파일 오류가 발생하는 오류를 수정하는 동안 결과는 컴파일 시간이 매우 느립니다. (Forman을 사용하여 Rails 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

앞서 언급했듯이 이러한 진행 과정은 마지막으로 완료되기 전에 약 5 분 동안로드됩니다. 내 생각에 변수를 업데이트했기 때문에 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"
  }
}

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

이것은 모든 단일 sass 파일의 맨 위에 상당히 많은 양의 CSS를 주입하므로 수백 번 반복됩니다. 변수 파일에는 실제 스타일을 출력하는 코드가 없어야합니다. 변수, 믹스 인 및 함수 만 허용됩니다.

그러나 변수 파일을 수정할 때 30 초 이상이 정상이지만,이 경우 모든 것을 다시 컴파일해야한다고 짐작했습니다. vuetify/lib/framework대신에 가져 오기를 vuetify/lib하면 dev 번들에 사용 된 구성 요소 만 포함시켜이 속도를 다소 높일 수 있습니다.