How to reduce vendor/script bundle.js in Angular 5

Question

I have already used ng build -prod -aot -vc -cc -dop --buildOptimize to reduce the size of the builded app. Now this is my situation:

Is it possible to reduce (or maybe split) these bigger chunks? Is there something that can help me to inspect inside these modules?

P.s. I have already used webpack-analyzer to inspect the situation but it can't go deep into these files.

https://angular.io/guide/deployment#inspect-the-bundles – JB Nizet Jun 01 '18 at 10:54 — JB Nizet, Jun 01 '18 at 10:54

Guerric P · Answer 1 · 2021-11-22T18:29:12.177

5

Build your app with sourcemaps, then use a tool like source-map-explorer that details the size of every part of library that you're using.

Some tips with common libraries :

If you're using RxJS 5.5 or higher, use the .pipe(operator1(), operator2()) syntax, it significantly reduces RxJS size when you don't use many different operators
If you're using moment.js be sure to import only the locales you're using
If you're using Angular Material, be sure you don't import unused modules
If you're using bootstrap and SASS, import only the needed parts of .scss files

If you didn't already do it, divide your app into lazy modules, it will reduce the size of the initial chunk.

edited Nov 22 '21 at 18:29

answered Jun 01 '18 at 11:43

Guerric P

30,447
6
48
86

I have this error if I use sourcemap: `FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory` – Alessandro Celeghin Jun 01 '18 at 11:57
1

I've never had this error when building an Angular app... There is a discussion about it here https://github.com/angular/angular-cli/issues/5618. It looks like there are working solutions – Guerric P Jun 01 '18 at 12:03
@Alessandro try to limit memory with `node --max_old_space_size=3072 node_modules/@angular/cli/bin/ng ...` – Martin Choraine Aug 30 '18 at 10:42
@MartinChoraine pretty sure he has already found something, 2 months later ;) – Guerric P Aug 30 '18 at 10:43
dayjs is a nice drop-in replacement for momentjs! – dockleryxk Jan 16 '19 at 23:33

score 1 · Answer 2 · answered Jun 11 '18 at 14:47

I had a similar issue with large prod bundles and fixed the issue with this command;

npm run build

I had been using

npm run ng build --prod

but the --prod flag doesn't execute and I was left with a vendor.bundle.js which was 2.9mbs

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 122 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 349 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.96 MB [initial] [rendered]

With just npm run build (no ng) the whole dist folder is 400kb

chunk {0} polyfills.67d5a7eec41ba0d20dc4.bundle.js (polyfills) 101 kB [initial] [rendered]
chunk {1} main.3874ea54d23e70290fa8.bundle.js (main) 327 kB [initial] [rendered]
chunk {2} styles.0aad5eda327b47b9e9fa.bundle.css (styles) 1.56 kB [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

score 0 · Answer 3 · answered Nov 15 '18 at 05:18

Sorry For Late Reply. This answer will work for all newer versions of Angular.

If you are using Angular Material, Then import from the specific package exporter.

Ex:

import {MatButtonModule} from '@angular/material/button';

istead of

import {MatButtonModule} from '@angular/material';

Avoid using Common Material Module throughout your application.

If you are using LazyLoading module, Import required packages in the specific module.

I followed these steps, I got reduced bundle size from 9.0MB to 1.45MB.

Hope it will work for you guys also :).

How to reduce vendor/script bundle.js in Angular 5

3 Answers3

Linked