There’s probably a lot of dead code in your Angular app — you know, the unnecessary bits and pieces that ends up adding kilobytes to the final deployment. Dead code is parts of the program that gets executed but is never actually used.
Dead code wastes time, space and memory — and Angular by nature is very fat and heavy. We’re talking MB sized kind of heavy. Unlike React and Vue, Angular has a whole host of libraries that it uses, which ends up contributing to the overall beefed up result that we see in a development environment.
Take the screenshot below as an example.
Brand spanking new CLI generated angular app
3.9MB just for the bare bones. What happens when you start adding in images, components, additional external libraries, CSS and API calls? That number is sure to go up, if not significantly. 3.9MB is pretty huge when Medium’s homepage, for example and in comparison, transfers about 3.6MB — images are inclusive.
Unlike Angular 1, which was more library like and lightweight in comparison, Angular 2 admits that deploying straight from a development environment to a production space without pruning is not the best idea. It’s possible but just don’t do it.
Although deploying directly from the development environment works, it’s far from optimal. — Angular 2
So how, exactly, does one optimize from a local development environment to a manageable and bandwidth friendly size deployment?
Build your applications with --prod meta-flag
The easiest way to significantly reduce the size of your Angular application is to use the --prod meta flag when you use ng build in the CLI. In theory, you could just copy and paste all the files as-is into your web server and it will still work, but you’ll run into the issue of overall size, which we are trying to reduce.
This post is for paying subscribers only
Sign up now and upgrade your account to read the post and get access to the full library of posts for paying subscribers only.
