Implement grunt tool in angular

Angular is the most popular javascript framework because of the high performance of site loading speed.

By default angular create a build for the code in one bunch, it compiles ts files and put all src directory code in the build directory. so our code made very small, but all JS files load in synchronous mode means to run these js files one by one. to overcome this problem we can implement GRUNT or GULP or any other tool.

Here, we will minify HTML and js files and load JS files in an asynchronous mode means load all these js files simultaneously and save loading time.

By calling the these JS files in an asynchronous mode, the page speed can be increased by at least 50% to 70%.

Here, we implement GRUNT tool/module in angular 7 but you can apply it with any version of angular like as angular 2, angular 4, angular 5, angular 6, angular 7, angular 8, etc.

Create Gruntfile.js file in the directory where node modules package.json file is available.

Demo: Gruntfile.js

module.exports = function(grunt) {
 grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
     dist: {
       files: {
         'dist/inline.js': ['dist/inline.*.js'],
         'dist/main.js': ['dist/main.*.js'],

         'dist/polyfills.js': ['dist/polyfills.*.js'],

         'dist/scripts.js': ['dist/scripts.*.js']
       }
     }
   },
   'string-replace': {
     dist: {
       files: [{
         expand: true,
         cwd: 'dist/',
         src: 'index.html',
         dest: 'dist/'
       }],
       options: {
         replacements: [{
           pattern: /<script type=/g,
           replacement: '<script async type='
         },{
           pattern: /inline.*.js/g,
           replacement: 'inline.js'
         },{
           pattern: /polyfills.*.js/g,
           replacement: 'polyfills.js'
         },{
           pattern: /scripts.*.js/g,
           replacement: 'scripts.js'
         },{
           pattern: /main.*.js/g,
           replacement: 'main.js'
         },
         {
           pattern: /<link/g,
           replacement: '<link type="text/css"'
         },
       ]
       }
   
     }
   },
   prettify: {
     options: {
       indent: 2,
       indent_char: ' ',
       wrap_line_length: 78,
       brace_style: 'expand'
     },
     one: {
       src: 'dist/index.html',
       dest: 'dist/index.html'
     }
   },
   htmlmin: {                                   
     dist: {                                   
       options: {                               
         removeComments: true,
         collapseWhitespace: true
       },
       files: {                                 
         'dist/index.html': 'dist/index.html'
       }
     }
   }
 });
 grunt.loadNpmTasks('grunt-contrib-uglify-es');
 grunt.loadNpmTasks('grunt-string-replace');
 grunt.loadNpmTasks('grunt-prettify');
 grunt.loadNpmTasks('grunt-contrib-htmlmin');
 grunt.registerTask('build', ['uglify', 'prettify', 'string-replace', 'htmlmin']);
};

Verify that dist/inline.*.js, dist/main.*.js, dist/polyfills.*.js, dist/scripts.*.js these files available or not. here we need to use * instead of any other text between like as main.1242121.js

If above files are not stored like as given above then it may be like as  dist/inline.*.bundle.js, dist/main.*.bundle.js, dist/polyfills.*.bundle.js, dist/scripts.*.bundle.js then user like as bellow format

uglify: {
     dist: {
       files: {
         'dist/inline.bundle.js': ['dist/inline.*.bundle.js'],
         'dist/main.bundle.js': ['dist/main.*.bundle.js'],

         'dist/polyfills.bundle.js': ['dist/polyfills.*.bundle.js'],

         'dist/scripts.bundle.js': ['dist/scripts.*.bundle.js']
       }
     }
   },
    ....
    ....
    ....

after adding Gruntfile.js install following node modules by using NPM

sudo npm install -g grunt-cli
sudo npm install grunt
sudo npm install grunt-contrib-uglify-es
sudo npm install grunt-string-replace
sudo npm install grunt-prettify
sudo npm install grunt-contrib-htmlmin

For build and minify using grunt

ng build --prod --build-optimizer
grunt build

After build, you can check your index.html file which is available in the dist directory. In this file, you can see async keyword with included js script link.

Now run your site and check that files are made smaller and run it asynchronous way and it will load your site very fast as compare to previous.