ES6 Babel Transforms : Code Injection and Increase in File Size

This post aims to give a rough idea on the increase of file size after applying babel transforms to ES6 JavaScript. These figures depend highly on your style of writing code since each extra space leads to an additional byte. However, the transform comparisons will give you an idea on how they are treated by babel and how much of additional code will be injected in your file. 

These file sizes are non-uglify, non-gzipped and without any method of compression on OSX.

let - var

• 3 bytes for the first rename. 
• 4 bytes for each subsequent rename.

const - var

• Save 1 byte per declaration.

Class Tranforms

• 852 bytes for using simple class declaration with a constructor. Adds two new functions, namely, _createClass and _classCallCheck.

• 
  
• 
  
•  
• 2114 bytes for creating and extending a class.

• Extending a class adds two more functions let us have a look at them, namely,
  _get and _inherits.

Arrow => functions

• 20 bytes per usage, depends on the usage as well.

Template Strings

• A little less than 4 bytes per variable call.

Destructuring

• Increase is equal to the size of key variables + 2 bytes each.

Default Arguments

• 77 bytes per default argument.

Custom `arguments` Keyword

• 117 bytes per function.