Angular 5 bundle size too big

Question

I am working on building a chatbot using angular 5. I have created a small application with 8/9 components. Now the problem is production build (bundle js ) files total comes up to 3.6 MB. If I have to host these files on cdn it would cost a LOT.

How do I reduce the bundle size to something feasible like 100 kb ?

Bundle details:

ng build
hunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 107 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 202 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 204 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 216 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.12 MB [initial] [rendered]

ng build --prod
chunk {inline} inline.a07175516c55c4014717.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.2e592d7ffe3a062bbdc0.bundle.js (main) 183 kB [initial] [rendered]
chunk {polyfills} polyfills.a958547e95fad8a7be8a.bundle.js (polyfills) 202 kB [initial] [rendered]
chunk {scripts} scripts.d93272ec54002ead254c.bundle.js (scripts) 204 kB [initial] [rendered]
chunk {styles} styles.b54edcd81812769932a0.bundle.css (styles) 197 kB [initial] [rendered]
chunk {vendor} vendor.343d293a3f72c924cb46.bundle.js (vendor) 2.84 MB [initial] [rendered]

Possible duplicate of [Angular2 CLI huge vendor bundle: how to improve size for prod?](https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod) — tomichel, Mar 08 '18 at 10:17

score 0 · Answer 1 · edited Nov 08 '18 at 13:12

0

Try running ng build --prod --aot --build-optimizer.

--build-optimizer removes even more dead code than --prod but it needs --aot flag to work, which means Ahead of Time Compilation

You could also, get Typescript Hero Plugin that will organize and remove unused imports.

Check the whole project looking for unused components, models, classes, services. Deleting them will reduce your final bundle size. Hope this helps.

edited Nov 08 '18 at 13:12

Francesco

9,947
7
67
110

answered Jun 06 '18 at 15:50

Leandro Cusack

359
1
6
21

1

--aot and --build-optimizer are both enabled by default when we build for production in angular-cli now, therefore there is no more need to use them explicitly. – Francesco Nov 08 '18 at 13:11
So, do you suggest to use just "--prod" flag? – Leandro Cusack Nov 12 '18 at 12:22

score 0 · Answer 2 · answered Jun 12 '18 at 00:19

0

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 seem to be ignored if you use 'ng'

See my full answer on another thread How to reduce vendor/script bundle.js in Angular 5

answered Jun 12 '18 at 00:19

Brian Clarke

19
1

1

If the same answer works for different questions, then we consider those questions to be duplicates. Instead of answering again, please flag the question as a duplicate. – Stephen Rauch Jun 12 '18 at 00:43

Angular 5 bundle size too big

2 Answers2