0

Angular Version: 2.4.10 Angular Cli Version: 1.0.0-rc.4 Build command used: ng build --aot (no --prod so i can use source-map-explorer )

I am not sure i understand how the build process organizes the modules and i must be making a mistake somewhere. I am trying to debug the huge size of the built project and see if there are any improvements i can bring to it. I have a common module that imports and exports commonly used modules across the application. The common module is imported in all child modules. If i only import it at app level the rest of the application doesn't seem to find the imported modules.

I installed source-map-explorer to check the bundles and chunks. All the lazy loaded modules seem to have inside of them the @angular package and some UI components modules. Shouldnt they only be placed somewhere at app level once and then refereced? This adds 1MB to each module.

The app is bassicly a huge form and because of that i created a module that contains the fieldsets used in order to be reused when needed. The fieldsets module after build is 8 mb while if i right click and select properties on the un-built folder is only 1.44 mb.

It seems that the ngFactory that the build generates are much much bigger then the actual file sizes. Why is that?

A landing page component that redirects the user to different sections of the app and only has a dozen fields and some text is 18 kb on disk and after build source-map-explorer shows me that landing-page.component.ngfactory.ts is 600 kb.

Running --prod along side ng build --aot does help by removing the maps and the bundles are smaller, but i still find the overall size too large.

Is there anything i can do besides ng build --aot --prod that could reduce the size?

Please let me know if i should add some specific code or information.

IvanSt
  • 360
  • 4
  • 17
  • 1
    You can refer to my answer on [this question](http://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod/43358855#43358855) – Jack Clancy Apr 12 '17 at 03:30
  • The file size increase is because of webpack adding its module code in the built files. To reduce the size you can check your imports and get rid of anything you don't need (AOT then helps in this case). Another step to take would be to run a post-build step to gzip your built bundles and configure your server to serve these to browsers with support for Accept-Encoding: gzip. This reduced the static file request traffic by ~75% in my case. – Heehaaw Jul 13 '17 at 13:08

0 Answers0