Angular 2 Production Build – Minify an Angular App

Share On Facebook
Share On Google Plus
Share On Linkedin
Contact us

     In this blog post I am going to show you the steps for minifying the application build using Angular 2. First concern is why minify the angular Application. Angular team released Angular 2 by taking mobile apps in mind. Angular 2 is made especially for the Mobile applications. The hybrid mobile applications that feel like native. These applications are called PWA, Progressive web apps.

     To take advantage of the PWA, the size of the application itself must be less enough to load instantly on open up the app. As for the angular application to run, it has to be load fully by the browser. But if the size factor of the application make it slow during the initial load of the page, then it must be a serious concern.

Minify a Sample Angular Application

     Our application consist of three files:-

  • app.component.ts

  • app.module.ts

  • main.ts

     In app.component.ts we define the component for our application. In app.module.ts we define the module of our app and export AppModule. In main.ts we bootstrap our application using the bootstrapmodule of platformBrowserDynamic. AppModule is the entry point of our application.

Now we have our index.html page as:-

You can see in index.html we insert the bundle.js from the dist folders. We are going to bundled our application using browserify. Here is the directory structure

Directory Structure Of Angular 2 Application
Directory Structure Of Angular 2 Application

To make the production build of this sample application. Lets try out the commands:-

Minification of the Application

Here is my package.json file

In the scripts section, there are the commands like

build, build_prod, and minify are the commands

build command

This command first run the clean command to clean up the dist folder and build the app using tsc. tsc is the command of the Typescript compiler.

build_prod command

This runs the build command. Then run browserify to bundle the application, i.e. make the bundle.js and then run the minify

     So lets try with the commands. You can directly download the application repo from here :- https://github.com/tusharcoder/angular2-minification then run

Now open http://127.0.0.1:9001/ to see the application works.

Application Works

Size Comparison

     Lets, Compare the Size of the bundle.js and bundle.min.js. What we have done so far is we build the app bundled it using the browserify. Then we minify it using uglify, that gives bundle.min.js. Size of bundle.js is 1.9M

bundle.js file zize

http://devtech.in/wp-content/uploads/2017/02/bundle_js_size.png

Size of bundle.min.js

Size of bundle.min.js

bundle.js file size is almost 2M as it contains not optimised application code. It contains white spaces, comments and unused functions, text and many more. Since we don’t need all of, what bundle.js contains so we minify it and make bundle.min.js

     Size of bundle.min.js is 583k, Wow 🙂 which is awesome as compared to 1.9M of bundle.js. This is the simple minification that we do. We can still do it even more better.

     Thanks for reading this tutorial. For the full code go to my github repo. For more tutorials Keep visiting this site and also check my Git repositories from https://github.com/tusharcoder?tab=repositories.

9 thoughts on “Angular 2 Production Build – Minify an Angular App

  1. Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed surfing around your blog posts.
    In any case I will be subscribing to your feed and I hope you write again very soon!

  2. Hi there! This article couldn?t be written any better!
    Reading through this article reminds me of my previous roommate!

    He constantly kept preaching about this. I’ll send this information to him.
    Pretty sure he’ll have a very good read. I appreciate
    you for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *