Reduce size of PrimeNg Library with Angular Cli

Question

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?

Answer 1

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.