Is it possible to create Angular2/4 bundles under several mb in size?

Question

Currently I'm doing the preliminary groundwork for my company's strategy to migrate one of our web applications to Angular4 ( tens of thousands of daily users ). I'm noticing that the official Angular documentation seems somewhat lacking in many areas. One area in particular I'm left wondering about, how are people creating Angular2/4 build toolchains? And does the wider web-development community see Angular4 as mature enough for building serious enterprise grade web applications on? I'm beginning to have my doubts.

I've created PoC applications using systemJS, Rollup, webpack on its own, and webpack as part of angular-cli, and even with 'Hello World' grade examples I seem unable to create bundles that are under 2+mb in size, which I'd call completely unsuitable for any serious public-facing app. Even "AOT" compilation with Webpack, together with "tree shaking" seems unable to create build artifacts of an acceptable size. Looking around the open-source community, I'm unable to find projects that have surmounted this issue. Most of the projects I do find are still using the angular-cli boilerplate, and supposedly prod-ready applications such as 'ng2-admin' are around 6mb fully minified with their own predefined toolchains.

I've successfully integrated an angular-cli based toolchain with our CI pipeline and can deploy a 'minified'(sic) app to a server, but the build times are terrible and the final file size is unacceptable even after following all of the official documentation and the best advice I can find in online articles.

tl;dr: Can Angular2/4 be used to create web-applications that are under several megabytes in size, and if so, can this be accomplished without being coupled to the angular-cli or webpack? What is the leanest toolchain one can use to bundle an application? I'd be very grateful if people could point me towards examples of applications that have overcome these issues, or better strategies for creating build pipelines.

Answer 1

This is the size of a bare working app generated and built for production with @angular/cli 1.2.0

So, the short answer to your question is: yes, you can create an angular 4 bundle with the size under several mb. Beside this point, it becomes just an opinionated discussion.

Answer 2

I can answer part of your question definitively:

Can Angular2/4 be used to create web-applications that are under several megabytes in size

Obviously it depends on what exactly you are doing, but in my case the answer is yes. I've developed a number of small angular applications (3-10 kLoc, 2-5 external dependencies). I use the angular-cli to manage my apps as well as to build the application, and they end up with very reasonable production sizes (IMO). For my larger app the production build time takes 20-30 seconds. Final (gzipped) filesize is ~170kb. It's not the smallest, but it's also not unreasonably large. I'm using a relatively low-powered laptop (Quad-core, 1.9Ghz).

Those results are straight out-of-the box. I haven't made any attempts to muck with the setup/toolchain at all yet.

Obviously we're now venturing into the realm of opinion-based answers, but I'm not using it for the hype. I appreciate the system architecture: I find it very easy to work within, and I find that it can do a lot for me with very little effort. Granted, I haven't delved in-depth into any other modern javascript frameworks, so I suppose it is possible I would like others just as much, but I'm plenty happy with Angular.

Regarding server-side rendering, I would say that there is a good chance that I will be looking into that in the future, but that topic has nothing to do with angular. I'm using angular because I need a highly-dynamic front-end experience that is very difficult to reproduce with a back-end system supplemented by some javascript. Angular (or any front-end application, really) is therefore a necessity for me. However all front-end applications come with one immediate drawback: you get slower page loads for landing pages because the entire application has to be delivered, the app has to initialize, and then you can go fetch your data to load your page. This makes for more trips to the server at the beginning when it matters the most, and as a result a slower experience overall for the end user. This isn't an issue with Angular though: this is simply the nature of the beast when you start building front-end applications.