title: How to decrease prod bundle size?
body: <p>I have a simple app, initialized by <code>angular-cli</code>.</p>
  
  <p>It display some pages relative to 3 routes. I have 3 components. On one of this page I use <code>lodash</code> and Angular 2 HTTP modules to get some data (using RxJS <code>Observable</code>s, <code>map</code> and <code>subscribe</code>). I display these elements using a simple <code>*ngFor</code>.</p>
  
  <p>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.</p>
  
  <p>Some tests results:</p>
  
  <p>ng build</p>
  
  <blockquote>
    <p>Hash: 8efac7d6208adb8641c1 Time: 10129ms chunk    {0} main.bundle.js,
    main.bundle.map (main) 18.7 kB {3} [initial] [rendered]</p>
    
    <p>chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map
    (styles) 155 kB {4} [initial] [rendered]</p>
    
    <p>chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB
    {4} [initial] [rendered]</p>
    
    <p>chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 3.96 MB
    [initial] [rendered]</p>
    
    <p>chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes
    [entry] [rendered]</p>
  </blockquote>
  
  <p>Wait: <strong>10Mb vendor bundle package for such a simple app?</strong></p>
  
  <p>ng build --prod</p>
  
  <blockquote>
    <p>Hash: 09a5f095e33b2980e7cc Time: 23455ms chunk    {0}
    main.6273b0f04a07a1c2ad6c.bundle.js,
    main.6273b0f04a07a1c2ad6c.bundle.map (main) 18.3 kB {3} [initial]
    [rendered]</p>
    
    <p>chunk    {1} styles.bfdaa4d8a4eb2d0cb019.bundle.css,
    styles.bfdaa4d8a4eb2d0cb019.bundle.map,
    styles.bfdaa4d8a4eb2d0cb019.bundle.map (styles) 154 kB {4} [initial]
    [rendered]</p>
    
    <p>chunk    {2} scripts.c5b720a078e5464ec211.bundle.js,
    scripts.c5b720a078e5464ec211.bundle.map (scripts) 128 kB {4} [initial]
    [rendered]</p>
    
    <p>chunk    {3} vendor.07af2467307e17d85438.bundle.js,
    vendor.07af2467307e17d85438.bundle.map (vendor) 3.96 MB [initial]
    [rendered]</p>
    
    <p>chunk    {4} inline.a345391d459797f81820.bundle.js,
    inline.a345391d459797f81820.bundle.map (inline) 0 bytes [entry]
    [rendered]</p>
  </blockquote>
  
  <p>Wait again: <strong>such a similar vendor bundle size for prod?</strong></p>
  
  <pre><code>ng build --prod --aot
  </code></pre>
  
  <blockquote>
    <p>Hash: 517e4425ff872bbe3e5b Time: 22856ms chunk    {0}
    main.95eadabace554e3c2b43.bundle.js,
    main.95eadabace554e3c2b43.bundle.map (main) 130 kB {3} [initial]
    [rendered]</p>
    
    <p>chunk    {1} styles.e53a388ae1dd2b7f5434.bundle.css,
    styles.e53a388ae1dd2b7f5434.bundle.map,
    styles.e53a388ae1dd2b7f5434.bundle.map (styles) 154 kB {4} [initial]
    [rendered]</p>
    
    <p>chunk    {2} scripts.e5c2c90547f3168a7564.bundle.js,
    scripts.e5c2c90547f3168a7564.bundle.map (scripts) 128 kB {4} [initial]
    [rendered]</p>
    
    <p>chunk    {3} vendor.41a6c1f57136df286f14.bundle.js,
    vendor.41a6c1f57136df286f14.bundle.map (vendor) 2.75 MB [initial]
    [rendered]</p>
    
    <p>chunk    {4} inline.97c0403c57a46c6a7920.bundle.js,
    inline.97c0403c57a46c6a7920.bundle.map (inline) 0 bytes [entry]
    [rendered]</p>
  </blockquote>
  
  <pre><code>ng build --aot
  </code></pre>
  
  <blockquote>
    <p>Hash: 040cc91df4df5ffc3c3f Time: 11011ms chunk    {0} main.bundle.js,
    main.bundle.map (main) 130 kB {3} [initial] [rendered]</p>
    
    <p>chunk    {1} styles.bundle.css, styles.bundle.map, styles.bundle.map
    (styles) 155 kB {4} [initial] [rendered]</p>
    
    <p>chunk    {2} scripts.bundle.js, scripts.bundle.map (scripts) 128 kB
    {4} [initial] [rendered]</p>
    
    <p>chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.75 MB
    [initial] [rendered]</p>
    
    <p>chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes
    [entry] [rendered]</p>
  </blockquote>
  
  <p>So a few questions for deploying my app on prod:</p>
  
  <ul>
  <li>Why are the vendor bundles so huge?</li>
  <li>Is tree shaking properly used by <code>angular-cli</code>? </li>
  <li>How to improve this bundle size?</li>
  <li><strong>Are the .map files required?</strong></li>
  <li>Are the testing features included in bundles? I don't need them in prod.</li>
  <li>Generic question: what are the recommanded tools to pack for prod? Maybe <code>angular-cli</code> (using Webpack in the background) is not the best option? Can we do better?</li>
  </ul>
  
  <p>I searched many discussions on Stack Overflow, but I haven't found any generic question.</p>