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:
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.
