Huge main.css file - ~23MB so app loading is very slow

@itzik wrote:

Hi

On Ionic-v3, Our final main.css file is huge - about 23MB minified. The not minified is 25MB and contains ~750K lines…
I saw that people complained about 1MB size…
It causing the app to load very slow and also when hiding the keyboard, there is ~1 sec delay.

It contains many classes starting with “card”, “toolbar” as I pasted below for some examples.
I found that these classes probably comes from “node_modules\ionic-angular” since it contains such folders but I think it’s not normal and don’t understand why they’re being added to the final css.

When I removed all most of them manually the keyboard didn’t have delay.

Can somebody assist?

Thanks!

Some examples:

.card-md-color-text-white .text-md-color-bg-corporate-black-start-opc02,
.card-md-color-text-white .card-header-md-color-bg-corporate-black-start-opc02,
.card-md-color-text-white .card-title-md-color-bg-corporate-black-start-opc02,
.card-md-color-text-white .card-content-md-color-bg-corporate-black-start-opc02 {
  color: rgba(0, 0, 0, 0.2);
}

.card-md-color-text-white .text-md-color-bg-corporate-black-end,
.card-md-color-text-white .card-header-md-color-bg-corporate-black-end,
.card-md-color-text-white .card-title-md-color-bg-corporate-black-end,
.card-md-color-text-white .card-content-md-color-bg-corporate-black-end {
  color: rgba(0, 0, 0, 0);
}

.card-md-color-text-white .text-md-color-bg-border-line,
.card-md-color-text-white .card-header-md-color-bg-border-line,
.card-md-color-text-white .card-title-md-color-bg-border-line,
.card-md-color-text-white .card-content-md-color-bg-border-line {
  color: white;
}

.card-md-color-text-white .text-md-color-bg-border-line-opc05,
.card-md-color-text-white .card-header-md-color-bg-border-line-opc05,
.card-md-color-text-white .card-title-md-color-bg-border-line-opc05,
.card-md-color-text-white .card-content-md-color-bg-border-line-opc05 {
  color: rgba(255, 255, 255, 0.5);
}

.card-md-color-text-white .text-md-color-bg-border-line-opc0,
.card-md-color-text-white .card-header-md-color-bg-border-line-opc0,
.card-md-color-text-white .card-title-md-color-bg-border-line-opc0,
.card-md-color-text-white .card-content-md-color-bg-border-line-opc0 {
  color: rgba(255, 255, 255, 0);
}

.card-md-color-text-white .text-md-color-bg-border-line-opc02,
.card-md-color-text-white .card-header-md-color-bg-border-line-opc02,
.card-md-color-text-white .card-title-md-color-bg-border-line-opc02,
.card-md-color-text-white .card-content-md-color-bg-border-line-opc02 {
  color: rgba(255, 255, 255, 0.2);
}

.card-md-color-text-white .text-md-color-bg-border-line-opc03,
.card-md-color-text-white .card-header-md-color-bg-border-line-opc03,
.card-md-color-text-white .card-title-md-color-bg-border-line-opc03,
.card-md-color-text-white .card-content-md-color-bg-border-line-opc03 {
  color: rgba(255, 255, 255, 0.3);
}

.card-md-color-text-white .text-md-color-border-line-card-content,
.card-md-color-text-white .card-header-md-color-border-line-card-content,
.card-md-color-text-white .card-title-md-color-border-line-card-content,
.card-md-color-text-white .card-content-md-color-border-line-card-content {
  color: #ccc;
}

.card-md-color-text-white .text-md-color-bg-black-line-opc03,
.card-md-color-text-white .card-header-md-color-bg-black-line-opc03,
.card-md-color-text-white .card-title-md-color-bg-black-line-opc03,
.card-md-color-text-white .card-content-md-color-bg-black-line-opc03 {
  color: rgba(0, 0, 0, 0.3);
}

.card-md-color-text-white .text-md-color-bg-black-opc08,
.card-md-color-text-white .card-header-md-color-bg-black-opc08,
.card-md-color-text-white .card-title-md-color-bg-black-opc08,
.card-md-color-text-white .card-content-md-color-bg-black-opc08 {
  color: rgba(0, 0, 0, 0.8);
}


.toolbar-ios-color-alert-closed .bar-button-color-alert-fire-ios,
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-fire,
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-fire {
  color: #ff9900;
  background-color: transparent;
}

.toolbar-ios-color-alert-closed .bar-button-color-alert-fire-ios:hover:not(.disable-hover),
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-fire:hover:not(.disable-hover),
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-fire:hover:not(.disable-hover) {
  color: #ff9900;
}

.toolbar-ios-color-alert-closed .bar-button-color-alert-fire-ios.activated,
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-fire.activated,
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-fire.activated {
  opacity: .4;
}

.toolbar-ios-color-alert-closed .bar-button-outline-ios-color-alert-fire {
  border-color: #ff9900;
  color: #ff9900;
  background-color: transparent;
}

.toolbar-ios-color-alert-closed .bar-button-outline-ios-color-alert-fire.activated {
  color: #fff;
  background-color: #ff9900;
}

.toolbar-ios-color-alert-closed .bar-button-solid-ios-color-alert-fire {
  color: #fff;
  background-color: #ff9900;
}

.toolbar-ios-color-alert-closed .bar-button-solid-ios-color-alert-fire.activated {
  color: #fff;
  background-color: #ffa114;
}

.toolbar-ios-color-alert-closed .bar-button-color-alert-flood-ios,
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-flood,
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-flood {
  color: #0099ff;
  background-color: transparent;
}

.toolbar-ios-color-alert-closed .bar-button-color-alert-flood-ios:hover:not(.disable-hover),
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-flood:hover:not(.disable-hover),
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-flood:hover:not(.disable-hover) {
  color: #0099ff;
}

.toolbar-ios-color-alert-closed .bar-button-color-alert-flood-ios.activated,
.toolbar-ios-color-alert-closed .bar-button-default.bar-button-ios-color-alert-flood.activated,
.toolbar-ios-color-alert-closed .bar-button-clear-ios-color-alert-flood.activated {
  opacity: .4;
}

.toolbar-ios-color-alert-closed .bar-button-outline-ios-color-alert-flood {
  border-color: #0099ff;
  color: #0099ff;
  background-color: transparent;
}

.toolbar-ios-color-alert-closed .bar-button-outline-ios-color-alert-flood.activated {
  color: #fff;
  background-color: #0099ff;
}

Posts: 1

Participants: 1

Read full topic