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

Ionic Framework ionic-v3
1

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… :slightly_smiling_face:
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;
}
2

Have you manually added any colors to the project?

2 Likes
3

Yes, a lot of colors…

Yesterday I found by chance that it’s mentioned here - Theming your Ionic App

Note: Adding a color will generate CSS styles for all Ionic components. This inflates the size of your CSS file and can slow down your app. If you only need to use the color in a few places, we recommend adding a new Sass variable for it.

I will remove them to variables…
I wish I knew it before :confused::v:

Thanks a lot.

1 Like