CODEWITHSUNDEEP
angularangular-cliprimeng
Vsh
Vsh

Reputation: 302

Reduce size of PrimeNg Library with Angular Cli

PrimeNg is a big library containing many components. My angular application is using only few components out of it. And I am using AngularCLI to build this application. When I build it, vendor.bundle has entire content of primeng library. This makes huge size of bundle size (~4MB).

How can I include only necessary components instead of full library?

Upvotes: 8

Views: 4266

Answers (1)

Vsh
Vsh

Reputation: 302

Generally we import PrimeNg component using following syntax

import {DataTableModule,SharedModule} from 'primeng/primeng';

When we refer to this common namespace, it pulls entire library in vendor.bundle.js

Instead of this, pull it from specific module, import { DataTableModule, } from 'primeng/components/datatable/datatable'; import { SharedModule } from 'primeng/components/common/shared';

This will just include referred component (+ their dependencies) in vendor.bundle.js

To find your relevant path, download PrimeNg Code (https://github.com/primefaces/primeng) and check list of components listed in "primeng.d.ts" file.

Upvotes: 12

Related Questions