уменьшить загрузочный объем загрузки

Question

У меня есть следующие строки в файле scss:

  @include transition(all 0.5s ease);

  @include media-breakpoint-only(md) {
    width: 500px;
  }

  @include media-breakpoint-only(xs) {
    width: 280px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 4px;
  }

они требуют:

@import '~bootstrap/scss/bootstrap';
@import '~primeng/resources/primeng.min.css';

, и это увеличивает несжатую полезную нагрузку с пары килобайт до 324,57 килобайт.

Это немного :) Может кто-нибудь помочь мне получить только те детали, которые мне нужны?

Answer 1

Эта первая строка импортирует всю библиотеку начальной загрузки.

Bootstrap НЕ указан как зависимость PrimeNG .

media-breakpoint-only происходит от Bootstrap.

Вы можете уменьшить это, изменив строку:

@import '~bootstrap/scss/bootstrap';

что-то вроде (не проверено):

@import '~bootstrap/scss/_functions'
@import '~bootstrap/scss/_variables'
@import '~bootstrap/scss/mixins/_breakpoints'

Это предполагает, что вы НЕ используете какие-либо другие вещи Bootstrap в вашем коде.

Если вам нужна только поддержка Media Query, используйте меньшую и превосходную sass-mq