2

Ever since upgrading my Angular app to version 5, then version 6, it's been downloading very slowly in the browser, sometimes taking well over 30 or 40 seconds. Though I'm optimizing the build for production, (ng build --prod --build-optimizer --aot), the core files add up to over a megabyte.

The main offenders are

  • main.1acde84f0c61a49d6387.js, which is 831kb,
  • styles.99d75733e80daf42e5f9.css, which is 269kb, and
  • 0.06cf948c35f50dabe8dc.js, which is 243kb.

enter image description here

Are these files typically so large? Any idea how I can trim them down and improve download speed?

Improve this question
8
  • likely, this is caused by 3rd party libraries bundled with your app. If you can, use "ng eject" and get the webpack configuration. Add the webpack-bundle-analyzer plugin (npmjs.com/package/webpack-bundle-analyzer) to find out which 3rd party is causing the large bundle size. Then set it up as an external script reference (preferably a CDN) rather than as part of the bundle. Commented Jun 26, 2018 at 3:10
  • I added the webpack-bundle-analyzer plugin. Here's a screenshot of the output: dropbox.com/s/bkdcbg30yct56b5/…. I can't identify anything that shouldn't be there ... Commented Jun 26, 2018 at 19:38
  • I see a few 3rd party libraries that you could separate out (lodash.js, url.js). Are you using @angular/cli or webpack? From what I can see, you should be able to get your bundle size down to about 100Kb (main.js) if you can separate out your vendor bundle from your app bundle. Commented Jun 26, 2018 at 21:12
  • Lazy loading modules will help too. Commented Jun 26, 2018 at 21:17
  • Thanks for the tips. I have angular-cli listed in package.json, and I'm building from the command line. Does that mean I'm using angular-cli? I didn't realize it was either-or. I would love to separate the vendor bundle from the app bundle, though I'm not sure how. Is this what ng eject is for? Commented Jun 26, 2018 at 21:54

1 Answer 1

Reset to default
4

The reason is you bundle all your application inside one module.

It means all your pages,components,... will bundle in one file, it surely will be heavy.

The solution here is you should separate your application to more smaller bundles. In Angular it called is module lazy load and implement preloading(optional) to decrease bundle size at first time loading.

You can follow these articles:

Or follow these steps:

  • Make a module for a your page, it also includes its necessary components.
  • Routing for this module

  • Use loadChildren to load this module at app router. Something like that:

    { path: 'a', loadChildren: './anynomous/anynomous.module#AnynomousModule' },

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Good call. I did have most everything grouped into a single module. I followed the tutorial you linked to and created new modules and new child routes for lazing loading. I now see 4 additional files in the dist folder, such as 1.b06a3b4d3470560595fb.js. However, download time has not improved, as my main.a346bfb6bc1d7f56862f.js is still over 800kb. (It actually got a little larger.) As experiments, I tried commenting out every route in app.routing.ts and reducing app.module.ts as much as possible, but still the main.js file was about 800kb. There must be something else I'm missing ...
I not sure about your app scenario, but you should separate all pages, components of your app into corresponding modules. Example: your first page is login page, so you just need to load the module only for login. it will take few kb. And 1.b06a3b4d3470560595fb.js it called is chunk, and with the normally application we have ~60 chunks, with large app we have more than it. Should modular our app.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.