Skip to main content

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.

Popular posts from this blog

Charting API for Financial Markets - JavaScript (SVG)

A brief about the released version of this API is available here.

As a part of the last semester of my graduation program (Bachelor of Engineering in Information Technology), I have been interning with a start-up, namely uTrade Solutions.  uTrade™ Solutions is a financial trading technology company with various products including multi-asset trading platform, algorithms and analytics. Instead of walking through my experience of working in a start-up, I would directly move to a short discussion about my project. 

uTrade Solutions is working to develop a financial analytics portal and every financial analytics portal employs the use of advanced charting. To draw and display different types of charts on the web, there are two main options which are widely used and acknowledged. Namely, Adobe Flash and Scalable Vector Graphics (SVG) . 
Using Adobe Flash has two main disadvantages: It requires the installation of an additional plugin to run content on the browser.It is not compatible with a…

FusionCharts Automated Testing Tool

While working at FusionCharts, every release we were faced with a daunting task of black box testing. Daunting mainly because of the breadth and the depth of the product. This post talks only about black box testing. FusionCharts Product as a whole contains about roughly 90 charts and each chart can be visually tweaked with a set of about 300 chart options/attributes. Ignoring any further permutation and combination, we have right there around 90*300 test cases. Apart from chart options, api testing which consisted of events and methods was needed. Clearly automation was required, as our manual testing would cover only a very small sample set that too based on smart assumptions.

With this problem at hand, I broke it down as follows:
Headless Browser
- Visual Regression
- API TestingUser Browser
- Visual Regression
- API Testing We liked to call it the FusionCharts Automated Testing Suite.

Headless testing would be based of a headless browser and integrated in to our nightly builds. It was…

Nouveau - The Open Source driver for Nvidia cards

The following is derivative of extended conversations and tutoring by Martin Peres ( irc_nick : mupuf ).

This article is an introductory discussion of nvidia gpus with respect to nouveau. Nouveau is the open-source driver which runs the Nvidia cards on your linux pc. A schematic breakdown of the nvidia architecture can be understood through this figure.



The first important repository is the envytools (https://github.com/pathscale/envytools), this contains the most valuable set of tools and documentation you ll find for/on nvidia cards.

To have a look at how the X Window System ( X11 -  current major version ) GUI framework works, let's say all the rendering is done by sending commands to the x-server. Applications connect to the x-server through a socket which allocates a context for their windows and issues commands like draw a line etc. For 2D rendering, the x-server has the EXA interface. The EXA can be accelerated by graphics drivers and the acceleration is done by DDX module…