ant-design / ant-design-icons

⭐ Ant Design SVG Icons
https://ant.design/components/icon/
MIT License
940 stars 577 forks source link

[Angular]: Large main bundle size due to Angular Icons module #576

Open StefanNedelchev opened 1 year ago

StefanNedelchev commented 1 year ago

I've recently tried scaffolding an app with NG-ZORRO which uses the @ant-desitn/icons-angular package. As you can see on the webpack bundle analysis, the module seems to take surprisingly large chunk of the file even with production after tree-shaking.

image NOTE: the tooltip shows non-minified size but the important thing here is how big it is relative to the whole bundle

If I'm not mistaken I'm using dynamic icon loading so I'm surprised to see that the Ant Design Angular Icons module to take almost 3 times the space of the Angular Router module (618kb vs 262kb).

Here is the IconsProviderModule generated by the schematics:

import { NgModule } from '@angular/core';
import { NZ_ICONS, NzIconModule } from 'ng-zorro-antd/icon';

import {
  MenuFoldOutline,
  MenuUnfoldOutline,
  FormOutline,
  DashboardOutline,
} from '@ant-design/icons-angular/icons';

const icons = [MenuFoldOutline, MenuUnfoldOutline, DashboardOutline, FormOutline];

@NgModule({
  imports: [NzIconModule],
  exports: [NzIconModule],
  providers: [
    { provide: NZ_ICONS, useValue: icons },
  ],
})
export class IconsProviderModule {
}

I even tried removing all module imports from Ant Design and NG ZORRO icon modules, and removing all icons from the app, but even then there is literally no change. Is there something I'm missing or it's just the minimum bundle size that for now I can't optimize any further?

Project info: Angular: 16.0.3 ng-zorro-antd: 16.0.0 @ant-design/icons-angular: 16.0.0 NG Zorro added using the schematics and selecting the side menu template

timonmasberg commented 6 months ago

Hi, we have the same issue, the library is currently unusable for us. I18n and the Icons module are insanely large. We tried every approach, but bundle size does not vary.

image
lppedd commented 4 months ago

So you're saying if your app doesn't have any icon reference, it still bundles 600kb worth of data?

lppedd commented 4 months ago

As far as I recall, NG-ZORRO always bundles some icons. For example, the "search" icon is always present.
Might be the reason?

lppedd commented 4 months ago

Just did an experiment and removed any trace of icons.
Bundle size went from 1740kb to 1135kb, and the analysis shows no trace of ant-design.

Are you using the Form module?