Очень длительное время компиляции с Vuetify 2.1 и Webpack - PullRequest
Новая
       27

Очень длительное время компиляции с Vuetify 2.1 и Webpack

5 голосов
/ 18 октября 2019

Я использую Vue CLI 3 и Vuetify 2.1 в новом проекте, и недавно изучил переопределение переменных SASS Vuetify . После того, как он наконец заработал, я понял, что каждый раз, когда я изменяю созданный мной файл variables.scss и проект перекомпилируется, процесс компиляции занимает около 5 минут. Я попытался обновить скрипт package.json, чтобы увеличить объем памяти, используемой Node, и, хотя это исправило полученную мной ошибку, которая приводила к сбою компиляции, результатом теперь является чрезвычайно медленное время компиляции. Прогресс, который показывает (я использую Foreman для запуска и моего 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

Эти загрузки прогрессируют, как я уже говорил, примерно за пять минут доэто наконец заканчивается. Я предполагаю, что, поскольку я обновил переменную, он должен пройти и обновить этот стиль для каждого компонента и экземпляра этой переменной в 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"
  }
}

1 Ответ

0 голосов
/ 07 ноября 2019

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

Это вставляет довольно большое количество CSS в верхнюю часть каждого файла sass, поэтому оно повторяется пару сотен раз. Файл переменных не должен содержать код, который выводит фактические стили - разрешены только переменные, миксины и функции.

30 + сек при изменении файла переменных, как обычно, однако, как вы уже догадались, в этом случае нужно все перекомпилировать. Импорт из vuetify/lib/framework вместо vuetify/lib может несколько ускорить это, только включив использованные компоненты в комплект разработчика.

...