Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
StefanNedelchev opened this issue May 29, 2023 · 4 comments
Open

Comments

@StefanNedelchev
Copy link

StefanNedelchev commented May 29, 2023

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
Copy link

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
Copy link

lppedd commented Mar 4, 2024

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

@lppedd
Copy link

lppedd commented Mar 4, 2024

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

@lppedd
Copy link

lppedd commented Mar 4, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants