Thời gian biên dịch cực dài với Vuetify 2.1 và Webpack

Tôi đang sử dụng Vue CLI 3 và Vuetify 2.1 trong một dự án mới, và gần đây đã đào sâu vào việc ghi đè các biến SASS của Vuetify . Sau khi cuối cùng nó cũng hoạt động, tôi nhận ra rằng mỗi lần tôi sửa đổi variables.scsstệp mà tôi đã tạo và biên dịch lại dự án, phải mất gần 5 phút để biên dịch xong. Tôi đã thử cập nhật tập lệnh pack.json để tăng bộ nhớ mà Node đang sử dụng và trong khi đó đã khắc phục lỗi tôi nhận được khiến trình biên dịch bị sập, kết quả là thời gian biên dịch cực kỳ chậm. Tiến trình hiển thị (Tôi đang sử dụng Foreman để chạy cả Rails API và máy chủ Vue của mình cùng một lúc) trông như thế này:

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

Những tiến trình tải, như tôi đã đề cập, trong khoảng năm phút trước khi nó hoàn thành. Tôi đoán là vì tôi đã cập nhật một biến, nên nó phải trải qua và cập nhật kiểu đó cho từng thành phần và thể hiện của biến đó trong nút Vuetify node_module.

Câu hỏi của tôi là liệu có cách nào để tăng tốc độ này? Có lẽ tôi đã thiết lập một cái gì đó sai đã gây ra vấn đề này? Hay điều này là hoàn toàn bình thường và tôi sẽ phải đối phó với nó?

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',
  },
});

biến.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';

pack.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';

Điều này đưa một lượng CSS khá lớn vào đầu mỗi tệp sass duy nhất, do đó, nó được lặp lại vài trăm lần. Tệp biến không được chứa bất kỳ mã nào tạo ra các kiểu thực tế - chỉ cho phép các biến, mixin và hàm.

Tuy nhiên, hơn 30 giây khi sửa đổi tệp biến là bình thường, như bạn đoán nó phải biên dịch lại mọi thứ trong trường hợp đó. Nhập từ vuetify/lib/frameworkthay vì vuetify/libcó thể tăng tốc phần nào bằng cách chỉ bao gồm các thành phần được sử dụng trong gói dev.