Skip to content
+91-7795206615
|
info@habilelabs.io

  • Home
  • About
  • Services
    • Custom Application Development
    • UI/UX Designing
    • Web Application Development
    • Offshore Product Services
    • Technical Outsourcing
    • ERP Services
  • Company
    • Careers
    • Case Studies
  • Specialization
    • Frontend Frameworks
      • Angular
      • ReactJS
      • VueJS
      • HTML / CSS
      • Javascript /Jquery
      • Bootstrap
      • Material design
    • Backend Frameworks
      • NodeJS
      • Meteor
      • GraphQL
      • Loopback
      • Salesforce
      • Spring Boot
      • Odoo
      • Laravel
    • Database / ORM
      • MySQL
      • PostgreSQL
      • Oracle
      • MongoDB
      • Google Firebase
      • Mongoose
      • Sequelize
      • Hibernate / JPA
    • Languages
      • Java Script
      • Dot Net
      • Java
      • Python
      • C / C++
      • PHP
      • AI / ML
      • Type Script
    • Mobile Frameworks
      • Ionic
      • Native Script
      • Native Android App
      • Native iOS App
      • Google Flutter
      • React Native
  • Blog
  • Hire Us

What is Minification and It’s Benefits

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Categories

  • Angular
  • Business Strategies
  • Cloud Services
  • CRM
  • Design Pattern
  • E-commerce
  • ERP Applications
  • Javascript
  • Meteor
  • Mobile development
  • Mongo DB
  • Node JS
  • Odoo
  • Our Partners
  • PHP
  • React
  • SAAS
  • Salesforce
  • SAP
  • Selenium
  • Tech stack Migration
  • Testing
  • UI-UX Design
  • Uncategorized
  • VAPT
  • Visualforce
  • Web Development
  • Web Security

Do you know What is Minification and why do we minify our code? if you want to know then you are in the right place. let’s discuss.

When you write code, the code can grow big in size. It can contain thousands of lines thus making the page size bigger. Bigger page sizes lead to large page load time which may disrupt your website performance. Moreover, it can cause relatively large bandwidth consumption, increasing costs which is not good for business.

With minified code, the page size gets reduced so that when the browser loads your code, it can load fast, and makes your website loading faster.

It reduces bandwidth consumption and other resource usages thus minimizing the cost and maximizing the performance.

What is Minification?

Minification is basically the removal of unnecessary code that the browser doesn’t need. It is done by minimizing the code and making it compact.

For example, when you open a website and see its source, often you will find code written like this-

This really doesn’t mean that the programmers have written it this way. This representation is only for the browser.

When you write code it contains lots of white-spaces, comments, big variable names, etc which are completely unnecessary for the browser, i.e. it ignores it. These things are just for programmers for readability and re-usability. So, what minification means is to remove these unnecessary things from your code that are of no meaning to the browser.

Let’s take an example:

Un-minified code- Size: 756 bytes gzipped (2.72KB uncompressed)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* this is a very big
 
comment
 
with lots of white spaces
 
which are completely unused by
the browser */
 
 
//variable names
$scope.pTasks=[];
 
        $scope.rTasks=[];
        $scope.cTasks=[];
 
        $scope.searchStr='';
        $scope.selected=null;
 
        $scope.arrDrag=[];
        $scope.posDrag=0;
 
        $scope.edit='';
        $scope.originalTask='';
        $scope.dragArr='';
 
        $scope.showTools=false;
        $scope.showAddTaskBtn=true;
        $scope.showAreaToAddTasks=false;
 
 
//initial loading
 
        TLService.loadFromStorage("pendingTasks",$scope.pendingTasks);
        TLService.loadFromStorage("runningTasks",$scope.runningTasks);
        TLService.loadFromStorage("completedTasks",$scope.completedTasks);
 
//add new task
 
        $scope.addTask= function () {
            if ($scope.enteredTask=='' || $scope.enteredTask==undefined) {
                return ;
            }
 
            TLService.addTask($scope.pendingTasks,$scope.enteredTask);
 
            $scope.enteredTask='';
            $scope.showAddTaskBtn=true;
            $scope.showAreaToAddTasks=false;
 
        };
 
//update localStorage
 
        $scope.updateLocalStorage= function () {
          //update pTask
            TLService.storeToStorage("pTasks",$scope.pTasks);
          //update rTask
            TLService.storeToStorage("rTasks",$scope.rTasks);
          //update cTask
            TLService.storeToStorage("Tasks",$scope.cTasks);
        };
 
// drag start callback
 
        $scope.onDragStart= function (key,dragArr,index) {
            $scope.arrDrag=arrDrag;
            $scope.posDrag=index;
            $scope.dragArr=key;
            $scope.showTools=true;
        };
 
//DrahEnd callback
 
        $scope.onDragEnd= function () {
            $scope.showTools=false;
        };
 
//to Edit
        $scope.dropToEdit=function(){
 
            $scope.toEdit=$scope.arrayDragged[$scope.positionDragged];
            $scope.originalTask=$scope.toEdit;
            $scope.showTools=false;
            $('#editModal').modal('show');
            return true;
        };
 
//to delete
 
        $scope.dropToDelete=function(){
            $scope.showTools=false;
            return true;
        };
 
// to save changes
        $scope.saveChanges=function() {
            if ($scope.edit=='' || $scope.edit==undefined) {
                return ;
            }
            TLService.saveAfterEdit($scope.dragArr,$scope.arrDrag,$scope.posDrag,$scope.edit);
            $('#editModal').modal('hide');
        };
 
//to cancel edit
 
        $scope.cancelEdit=function(){
            TLService.saveAfterEdit($scope.dragArr,$scope.arrDrag,$scope.posDrag,$scope.originalTask);
          //hide modal
            $('#editModal').modal('hide');
        };

 

minified code: – Size: 482 bytes gzipped (1.55KB uncompressed)

1
2
3
4
$scope.pTasks=[];$scope.rTasks=[];$scope.cTasks=[];$scope.searchStr="";$scope.selected=null;$scope.arrDrag=[];$scope.posDrag=0;$scope.edit="";$scope.originalTask="";$scope.dragArr="";$scope.showTools=!1;$scope.showAddTaskBtn=!0;$scope.showAreaToAddTasks=!1;TLService.loadFromStorage("pendingTasks",$scope.pendingTasks);TLService.loadFromStorage("runningTasks",$scope.runningTasks);TLService.loadFromStorage("completedTasks",$scope.completedTasks);
$scope.addTask=function(){""!=$scope.enteredTask&&void 0!=$scope.enteredTask&&(TLService.addTask($scope.pendingTasks,$scope.enteredTask),$scope.enteredTask="",$scope.showAddTaskBtn=!0,$scope.showAreaToAddTasks=!1)};$scope.updateLocalStorage=function(){TLService.storeToStorage("pTasks",$scope.pTasks);TLService.storeToStorage("rTasks",$scope.rTasks);TLService.storeToStorage("Tasks",$scope.cTasks)};
$scope.onDragStart=function(a,c,b){$scope.arrDrag=arrDrag;$scope.posDrag=b;$scope.dragArr=a;$scope.showTools=!0};$scope.onDragEnd=function(){$scope.showTools=!1};$scope.dropToEdit=function(){$scope.toEdit=$scope.arrayDragged[$scope.positionDragged];$scope.originalTask=$scope.toEdit;$scope.showTools=!1;$("#editModal").modal("show");return!0};$scope.dropToDelete=function(){$scope.showTools=!1;return!0};
$scope.saveChanges=function(){""!=$scope.edit&&void 0!=$scope.edit&&(TLService.saveAfterEdit($scope.dragArr,$scope.arrDrag,$scope.posDrag,$scope.edit),$("#editModal").modal("hide"))};$scope.cancelEdit=function(){TLService.saveAfterEdit($scope.dragArr,$scope.arrDrag,$scope.posDrag,$scope.originalTask);$("#editModal").modal("hide")};

Saved 36.24% off the gzipped size (43.09% without gzip)

How to minify your code:-

Well, you can do it your own self, but this will certainly be a very bad choice. You can use the following tools that are available for free:-

Links to follow for Code Minifier tools:

  • Javascript Minifier
  • Google Closure Compiler
  • Yahoo YUI Compressor

You can use these tools to minify code easily.

Moreover, when you download a 3rd party library such as jQuery etc you have the choice to download the minified version
for production or the full version for development, though they will be functionally identical.
If you choose npm or browser to use those libraries, they will come to you as minified.

Conclusion:-

To conclude minification is a technique by which you can reduce resource usage, reduce page load time and increase the
performance gain making the user experience better.

We are web development experts, we also develop the best quality mobile applications.

Ask anything in the comment section if you have any queries or suggestions.

Posted bysankalpJuly 11, 2017February 8, 2021Posted inJavascript, Our PartnersTags: Minification, minified code, Minify your code

Post navigation


:

Leave a comment

Cancel reply

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

Recent Posts

  • PyScript – Python for the Web Browser

    PyScript – Python for the Web Browser

  • Cross-Database with Association in Postgres with Sequelize

    Cross-Database with Association in Postgres with Sequelize

  • How can You Improve Your Communication Skills – Effective Tips

    How can You Improve Your Communication Skills – Effective Tips

  • 5 Reasons that Make CRM Software Beneficial for Every Business

    5 Reasons that Make CRM Software Beneficial for Every Business

  • Do Low-Code Solutions have a Future in Web Development?

    Do Low-Code Solutions have a Future in Web Development?

  • A Revenue Management Reset in Consumer Goods

    A Revenue Management Reset in Consumer Goods

Talk to our experts now

Have a project or looking for development team? Contact us.

Get a quote

About Us

Habilelabs Private Limited is the ISO 9001:2015 certified IT company, which has marked its flagship in 20+ countries with 100+ projects successfully

Company

  • About
  • Blog
  • Careers
  • Hire Us
  • Privacy Policy

Contact Us

  • +91-9828247415
  • +91-9887992695
  • info@habilelabs.io

Follow Us

Office

  • Habilelabs Private Limited
    4th Floor, I.G.M. School Campus,
    Sec-93 Agarwal Farm, Mansarovar,
    Jaipur, Rajasthan India
    Pin:302020