How to decrease prod bundle size

Question

I have a simple app  initialized by angular-cli   It display some pages relative to 3 routes  I have 3 components  On one of this page I use lodash and Angular 2 HTTP modules to get some data  using RxJS Observables  map and subscribe   I display these elements using a simple  ngFor   But  despite the fact my app is really simple  I get a huge  in my opinion  bundle package and maps  I don t talk about gzip versions though but size before gzipping  This question is just a general recommendations inquiry   Some tests results   ng build     Hash  8efac7d6208adb8641c1 Time  10129ms chunk     0  main bundle js    main bundle map  main  18 7 kB  3   initial   rendered       chunk     1  styles bundle css  styles bundle map  styles bundle map    styles  155 kB  4   initial   rendered       chunk     2  scripts bundle js  scripts bundle map  scripts  128 kB    4   initial   rendered       chunk     3  vendor bundle js  vendor bundle map  vendor  3 96 MB    initial   rendered       chunk     4  inline bundle js  inline bundle map  inline  0 bytes    entry   rendered    Wait  10Mb vendor bundle package for such a simple app   ng build --prod     Hash  09a5f095e33b2980e7cc Time  23455ms chunk     0    main 6273b0f04a07a1c2ad6c bundle js    main 6273b0f04a07a1c2ad6c bundle map  main  18 3 kB  3   initial     rendered       chunk     1  styles bfdaa4d8a4eb2d0cb019 bundle css    styles bfdaa4d8a4eb2d0cb019 bundle map    styles bfdaa4d8a4eb2d0cb019 bundle map  styles  154 kB  4   initial     rendered       chunk     2  scripts c5b720a078e5464ec211 bundle js    scripts c5b720a078e5464ec211 bundle map  scripts  128 kB  4   initial     rendered       chunk     3  vendor 07af2467307e17d85438 bundle js    vendor 07af2467307e17d85438 bundle map  vendor  3 96 MB  initial     rendered       chunk     4  inline a345391d459797f81820 bundle js    inline a345391d459797f81820 bundle map  inline  0 bytes  entry     rendered    Wait again  such a similar vendor bundle size for prod   ng build --prod --aot      Hash  517e4425ff872bbe3e5b Time  22856ms chunk     0    main 95eadabace554e3c2b43 bundle js    main 95eadabace554e3c2b43 bundle map  main  130 kB  3   initial     rendered       chunk     1  styles e53a388ae1dd2b7f5434 bundle css    styles e53a388ae1dd2b7f5434 bundle map    styles e53a388ae1dd2b7f5434 bundle map  styles  154 kB  4   initial     rendered       chunk     2  scripts e5c2c90547f3168a7564 bundle js    scripts e5c2c90547f3168a7564 bundle map  scripts  128 kB  4   initial     rendered       chunk     3  vendor 41a6c1f57136df286f14 bundle js    vendor 41a6c1f57136df286f14 bundle map  vendor  2 75 MB  initial     rendered       chunk     4  inline 97c0403c57a46c6a7920 bundle js    inline 97c0403c57a46c6a7920 bundle map  inline  0 bytes  entry     rendered    ng build --aot      Hash  040cc91df4df5ffc3c3f Time  11011ms chunk     0  main bundle js    main bundle map  main  130 kB  3   initial   rendered       chunk     1  styles bundle css  styles bundle map  styles bundle map    styles  155 kB  4   initial   rendered       chunk     2  scripts bundle js  scripts bundle map  scripts  128 kB    4   initial   rendered       chunk     3  vendor bundle js  vendor bundle map  vendor  2 75 MB    initial   rendered       chunk     4  inline bundle js  inline bundle map  inline  0 bytes    entry   rendered    So a few questions for deploying my app on prod    Why are the vendor bundles so huge  Is tree shaking properly used by angular-cli   How to improve this bundle size  Are the  map files required  Are the testing features included in bundles  I don t need them in prod  Generic question  what are the recommanded tools to pack for prod  Maybe angular-cli  using Webpack in the background  is not the best option  Can we do better    I searched many discussions on Stack Overflow  but I haven t found any generic question

User · Answer

Lodash can contribute a bug chunk of code to your bundle depending on how you import from it. For example:

// includes the entire package (very large)
import * as _ from 'lodash';

// depending on your buildchain, may still include the entire package
import { flatten } from 'lodash';

// imports only the code needed for `flatten`
import flatten from 'lodash-es/flatten'

Personally I still wanted smaller footprints from my utility functions. E.g. flatten can contribute up to 1.2K to your bundle, after minimization. So I've been building up a collection of simplified lodash functions. My implementation of flatten contributes around 50 bytes. You can check it out here to see if it works for you: https://github.com/simontonsoftware/micro-dash

User · Answer

Check you have configuration named  production  for ng build --prod  since it is shorthand for ng build --configuration production No answer solved my problem  because the problem was sitting right in front of the screen  I think this might be quite common    I ve internationalized the app with i18n renaming all configurations to e g  production-en  Then I built with ng build --prod assuming  that the default optimization is used and should be close to optimal  but in fact just ng build has been executed resulting in 7mb bundle instead of 250kb

User · Answer

If you have run ng build --prod - you shouldn t have vendor files at all  If I run just ng build - I get these files   The total size of the folder is  14MB  Waat   D But if I run ng build --prod - I get these files   The total size of the folder is 584K  One and the same code  I have enabled Ivy in both cases  Angular is 8 2 13  So - I guess you didn t add --prod to your build command

User · Answer

This did reduce the size in my case     ng build --prod --build-optimizer --optimization    For Angular 5  ng-build --prod does this by default  Size after running this command reduced from 1 7MB to 1 2MB  but not enough for my production purpose   I work on facebook messenger platform and messenger apps need to be lesser than 1MB to run on messenger platform  Been trying to figure out a solution for effective tree shaking but still no luck

User · Answer

One thing I wish to share is how imported libraries increase the size of the dist  I had angular2-moment package imported  whereas I could do all the date time formatting I required using the standard DatePipe exported from  angular common   With Angular2-Moment  angular2-moment     1 6 0       chunk     0  polyfills 036982dc15bb5fc67cb8 bundle js  polyfills  191   kB  4   initial   rendered  chunk     1    main e7496551a26816427b68 bundle js  main  2 2 MB  3   initial     rendered  chunk     2  styles 056656ed596d26ba0192 bundle css    styles  69 bytes  4   initial   rendered  chunk     3    vendor 62c2cfe0ca794a5006d1 bundle js  vendor  3 84 MB  initial     rendered  chunk     4  inline 0b9c3de53405d705e757 bundle js  inline    0 bytes  entry   rendered    After removing Angular2-moment and using DatePipe instead     chunk     0  polyfills 036982dc15bb5fc67cb8 bundle js  polyfills  191   kB  4   initial   rendered  chunk     1    main f2b62721788695a4655c bundle js  main  2 2 MB  3   initial     rendered  chunk     2  styles 056656ed596d26ba0192 bundle css    styles  69 bytes  4   initial   rendered  chunk     3    vendor e1de06303258c58c9d01 bundle js  vendor  3 35 MB  initial     rendered  chunk     4  inline 3ae24861b3637391ba70 bundle js  inline    0 bytes  entry   rendered    Note the vendor bundle has reduced half a Megabyte   Point is it is worth checking what angular standard packages can do even if you are already familiar with an external lib

User · Answer

Firstly  vendor bundles are huge simply because Angular 2 relies on a lot of libraries  Minimum size for Angular 2 app is around 500KB  250KB in some cases  see bottom post   Tree shaking is properly used by angular-cli  Do not include  map files  because used only for debugging  Moreover  if you use hot replacement module  remove it to lighten vendor   To pack for production  I personnaly use Webpack  and angular-cli relies on it too   because you can really configure everything for optimization or debugging  If you want to use Webpack  I agree it is a bit tricky a first view  but see tutorials on the net  you won t be disappointed  Else  use angular-cli  which get the job done really well   Using Ahead-of-time compilation is mandatory to optimize apps  and shrink Angular 2 app to 250KB   Here is a repo I created  github com JCornat min-angular  to test minimal Angular bundle size  and I obtain 384kB  I am sure there is easy way to optimize it   Talking about big apps  using the AngularClass angular-starter configuration  the same as in the repo above  my bundle size for big apps  150  components  went from 8MB  4MB without map files  to 580kB

User · Answer

If you are using Angular 8  and you want to reduce the size of the bundle you can use Ivy  Ivy comes as the default view engine in Angular 9 Just go to src tsconfig app json and add the angularCompilerOptions parameter  for example        extends           compilerOptions          exclude            add this one        angularCompilerOptions          enableIvy   true

User · Answer

Use latest angular cli version and use command ng build --prod --build-optimizer  It will definitely reduce the build size for prod env   This is what the build optimizer does under the hood   The build optimizer has two main jobs   First  we are able to mark parts of your application as pure this improves the tree shaking provided by the existing tools  removing additional parts of your application that aren   t needed   The second thing the build optimizer does is to remove Angular decorators from your application   s runtime code  Decorators are used by the compiler  and aren   t needed at runtime and can be removed  Each of these jobs decrease the size of your JavaScript bundles  and increase the boot speed of your application for your users   Note   One update for Angular 5 and up  the ng build --prod automatically take care of above process

User · Answer

Taken from the angular docs v9  https   angular io guide workspace-config alternate-build-configurations    By default  a production configuration is defined  and the ng build command has --prod option that builds using this configuration  The production configuration sets defaults that optimize the app in a number of ways  such as bundling files  minimizing excess whitespace  removing comments and dead code  and rewriting code to use short  cryptic names   quot minification quot     Additionally you can compress all your deployables with  angular-builders custom-webpack browser builder where your custom webpack config js looks like that  module exports       entry           output        path  path resolve   dirname   dist        filename    name   hash  js         plugins        new CompressionPlugin         deleteOriginalAssets  true                 Afterwards you will have to configure your web server to serve compressed content e g  with nginx you have to add to your nginx conf  server       gzip on      gzip types      text plain application xml      gzip proxied    no-cache no-store private expired auth      gzip min length 1000             In my case the dist folder shrank from 25 to 5 mb after just using the --prod in ng build and then further shrank to 1 5mb after compression

User · Answer

Another way to reduce bundle  is to serve GZIP instead of JS  We went from 2 6mb to 543ko    https   httpd apache org docs 2 4 mod mod deflate html

User · Answer

The following solution assumes you are serving your dist  folder using nodejs  Please use the following app js in root level  const express   require  express   http   require  http   path   require  path   compression   require  compression     const app   express     app use express static path join   dirname   dist      app use compression      compressing dist folder  app get       req  res    gt      res sendFile path join   dirname   dist index html         const port   process env PORT     4201   app set  port   port    const server   http createServer app   server listen port       gt  console log  Running at port     port     Make sure you install dependencies   npm install compression --save npm install express --save    Now build the app  ng build --prod --build-optimizer      If you want to further compress the build say reduce 300kb approx    from   then follow the below process    Create a folder called vendor inside the src folder and inside vendor folder create a file rxjs ts  and paste the below code in it   export  Subject  from  rxjs Subject   export  Observable  from  rxjs Observable   export  Subscription  from  rxjs Subscription     And then add the follwing in the tsconfig json file in your angular-cli application  Then in the compilerOptions   add the following json    paths            rxjs                vendor rxjs ts                  This will make your build size way too smaller  In my project I reduced the size from 11mb to 1mb  Hope it helps

User · Answer

Its works 100  ng build --prod --aot --build-optimizer --vendor-chunk true

User · Answer

I have a angular 5   spring boot app application properties 1 3   with help of compression link attached below  was able to reduce the size of main bundle ts size from 2 7 MB to 530 KB   Also by default --aot and --build-optimizer are enabled with --prod mode you need not specify those separately   https   stackoverflow com a 28216983 9491345

User · Answer

Update February 2020  Since this answer got a lot of traction  I thought it would be best to update it with newer Angular optimizations     As another answerer said  ng build --prod --build-optimizer is a good option for people using less than Angular v5  For newer versions  this is done by default with ng build --prod Another option is to use module chunking lazy loading to better split your application into smaller chunks  Ivy rendering engine comes by default in Angular 9  it offers better bundle sizes Make sure your 3rd party deps are tree shakeable  If you re not using Rxjs v6 yet  you should be   If all else fails  use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules Check if you files are gzipped     Some claims that using AOT compilation can reduce the vendor bundle size to 250kb  However  in BlackHoleGalaxy s example  he uses AOT compilation and is still left with a vendor bundle size of 2 75MB with ng build --prod --aot  10x larger than the supposed 250kb  This is not out of the norm for angular2 applications  even if you are using v4 0  2 75MB is still too large for anyone who really cares about performance  especially on a mobile device    There are a few things you can do to help the performance of your application    1  AOT  amp  Tree Shaking  angular-cli does this out of the box   With Angular 9 AOT is by default on prod and dev environment    2  Using Angular Universal A K A  server-side rendering  not in cli     3  Web Workers  again  not in cli  but a very requested feature    see  https   github com angular angular-cli issues 2305  4  Service Workers see  https   github com angular angular-cli issues 4006  You may not need all of these in a single application  but these are some of the options that are currently present for optimizing Angular performance  I believe hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future    Here is a reference that talks more in depth about some of the concepts i mentioned above    https   medium com  areai51 the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

[angular] How to decrease prod bundle size?

Examples related to angular

Examples related to webpack

Examples related to angular-cli