Waktu kompilasi yang sangat lama dengan Vuetify 2.1 dan Webpack


9

Saya menggunakan Vue CLI 3 dan Vuetify 2.1 dalam proyek new-ish, dan baru-baru ini menyelidiki variabel SASS Vuetify . Setelah akhirnya berhasil, saya menyadari bahwa setiap kali saya memodifikasi variables.scssfile yang saya buat dan proyek mengkompilasi ulang, dibutuhkan hampir 5 menit untuk menyelesaikan kompilasi. Saya sudah mencoba memperbarui script package.json untuk menambah memori yang digunakan Node, dan sementara itu memperbaiki kesalahan yang saya terima yang menyebabkan kompilasi macet, hasilnya sekarang kompilasi kali sangat lambat. Progres yang menunjukkan (saya menggunakan Foreman untuk menjalankan API Rails dan Vue server saya secara bersamaan) terlihat seperti ini:

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

Ini berlangsung memuat, seperti yang saya sebutkan, selama sekitar lima menit sebelum akhirnya selesai. Dugaan saya adalah bahwa karena saya memperbarui variabel, itu harus melalui dan memperbarui gaya itu untuk setiap komponen dan contoh dari variabel itu di Vuetify node_module.

Pertanyaan saya adalah apakah ada cara untuk mempercepat ini? Mungkin saya salah mengatur yang menyebabkan masalah ini? Atau apakah ini benar-benar normal dan saya harus menghadapinya?

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

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

Saya mengalami masalah yang sama dengan waktu pembuatan ketika mengatur variabel Sass seperti ini. Saya juga menemukan orang lain mengalami waktu pengembangan yang lambat di sini github.com/vuetifyjs/vuetify/issues/9323#issuecomment-540984585 . Saya tidak akan mengatakan itu 'normal' sama sekali dan saya mencoba membuat case use dikurangi sekarang untuk mengangkat masalah pada vuetify github
mattGreenfield

Fantastis, terima kasih atas tanggapannya! Saya akan mengikuti dengan masalah itu dan melihat apa yang terjadi. Terima kasih lagi!
J. Jackson

1
Memiliki masalah yang sama persis. Menghapus file variabel sass membuat semuanya bekerja cepat lagi.
Zaptree

1
Saya telah mengangkat masalah baru karena saya sudah mencoba segalanya dan masih lambat github.com/vuetifyjs/vuetify-loader/issues/95
mattGreenfield

1
Kami memiliki masalah yang sama. Membangun waktu untuk pengembangan dan produksi sangat besar. Juga vuetify-loadermemiliki sejumlah bug sehingga kami memutuskan untuk menggunakan instalasi vuetify lengkap tanpa variabel SASS dan vuetify-loader. Perubahan signifikan - waktu build kami berkurang dari 6 menit menjadi <2 menit dan server pengembangan dimulai dalam 15 detik dengan pemuatan ulang yang cukup cepat. Ngomong-ngomong, dengan menghapus sass/variables.scsskita sudah membuat build kita cepat lagi.
Andriy Lach

Jawaban:


2

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

Ini menyuntikkan sejumlah besar CSS ke bagian atas setiap file sass tunggal, sehingga diulang beberapa ratus kali. File variabel tidak boleh berisi kode apa pun yang menampilkan gaya aktual - hanya variabel, mixin, dan fungsi yang diizinkan.

30+ detik ketika memodifikasi file variabel adalah normal, seperti yang Anda duga harus mengkompilasi ulang semua yang ada dalam kasus itu. Mengimpor dari vuetify/lib/frameworkalih-alih vuetify/libdapat mempercepat ini dengan hanya menyertakan komponen bekas dalam bundel dev.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.