1

I've looked around online. And everyone seems to have this problem where their vendor bundle is huge. Well, my script bundle is huge. Almost 7mb. I kinda need to fix this one quickly, because that bundle takes like 27 seconds to load. What should I be doing to fix this? Why is it happening? Where to look for to learn more?

And also, I found documentation for webpack but did not find anything of how angular-cli builds/serves an application in conjugation with webpack.

After I run ng build --prod

chunk {0} 0.3130ddc9c1a424a149a1.chunk.js () 77.4 kB {8}  [rendered]
chunk {1} 1.c5da564c11f7edf98974.chunk.js () 26.4 kB {8}  [rendered]
chunk {2} 2.b84f2a93f9153e6532ca.chunk.js () 33.4 kB {8}  [rendered]
chunk {3} 3.d1926e2cd05a43cdc96f.chunk.js () 24.3 kB {8}  [rendered]
chunk {4} 4.f08daf131a3afb05cdf6.chunk.js () 16.6 kB {8}  [rendered]
chunk {5} 5.394c153aa38c124c9f19.chunk.js () 17.3 kB {8}  [rendered]
chunk {6} polyfills.fd1491838f391af1a80a.bundle.js (polyfills) 63.1 kB {11} [initial] [rendered]
chunk {7} scripts.b2567d692113b0e5c5d5.bundle.js (scripts) 6.88 MB {11} [initial] [rendered]
chunk {8} main.b5272219b1e6fb94292d.bundle.js (main) 70.1 kB {10} [initial] [rendered]
chunk {9} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes {11} [initial] [rendered]
chunk {10} vendor.e3bfc53d2baeb0d3f3f2.bundle.js (vendor) 481 kB [initial] [rendered]
chunk {11} inline.7c24db908bbf9f1b270a.bundle.js (inline) 1.62 kB [entry] [rendered]
srijanshukla
  • 1,066
  • 2
  • 13
  • 21
  • 1
    Look at your `.angular-cli.json` The `scripts` field – yurzui Sep 19 '17 at 06:29
  • 1
    For Webpack in general, this is typically caused by source maps being included in the bundle. – robertklep Sep 19 '17 at 06:30
  • 1
    Have you looked [here](https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod)? – Matt Sep 19 '17 at 06:30
  • 1
    Make sure you're only importing functions you're actually using. If you have something like `import "rxjs";` somewhere, for example, things start getting hairy. – Stephen Vernyi Sep 19 '17 at 06:34
  • @roberklep how do I remove source maps? – srijanshukla Sep 19 '17 at 06:36
  • @yurzui yes there are quite a lot of files there. how do I go about fixing this? should I remove them from there. add them to the root folder seperately and then async load? because the first page is the login page and doesn't really require all of them to load before anything meaningful shows up. I can do that with libraries like datatable, moment etc. Is that the right way? – srijanshukla Sep 19 '17 at 06:40
  • 1
    @srijanshukla in the Webpack configuration file (look [here](https://webpack.js.org/configuration/devtool/#devtool)). However, I'm not sure if `ng` uses a regular Webpack setup (no experience with it). – robertklep Sep 19 '17 at 06:59
  • 1
    angular-cli disables sourcemaps by default when building with `--prod` (it implies `--sourcemaps=false`. see https://github.com/angular/angular-cli/wiki/build . so, if you're not using an old version, sourcemaps should not be to blame – phil294 Sep 19 '17 at 10:47

0 Answers0