Tree shaking — How to write code and reduce the bundle size in Webpack 4+


Tree shaking has become more popular during recent days and hence now its becomes a vital responsibility for a bundler to support tree shaking.

Okay why it is much more important?. The answer is below,

No user will wait for more than 3 seconds for a page to load.

So its important to keep the bundle size as small as possible for a web page to load fast. Webpack and Rollup are the two popular bundlers which supports tree shaking.

In this article, I am going to speak about some guidelines to write code that support tree shaking and also how to reduce bundle size in Webpack.

Write or compile code to ES6

Since tree shaking works by marking the export and import statements as unused, it is better to write or compile your code to ES6 format. Unused imports will be removed during minification process.

If your browsers does not support ES6 codes then there are many transpiler available to do the conversion (For example: Babel).

Use Feature Module (Loose coupling)

Segregate features into separate modules. Know your customer before planning your web site or library.

All users are not going to use all of your library features, so its always a good practice to segregate the features into separate modules and allowing the user to inject when needed.

The feature modules should be loosely coupled with main module and also ensure to avoid explicit usage of the feature module classes or functions inside main module. Create a pub-sub pattern for your website/library to perform communication between modules.

Learn to use functional programming paradigm

Well, writing code using functional programming paradigm allows you to easily maintain and deliver a bug free product. Below are some of the things, you need to know when using function programming.

  • Write pure class/functions.
  • Use array methods such as filter, some, map etc.
  • Avoid using shared state.
  • Avoid mutating state.

You can find a complete explanation about Function Programming in the Master the JavaScript Interview: What is Functional Programming? drafted by Eric Elliott.

Set sideEffects — Reduce bundle size in Webpack


When you have followed the above sections in your code then you are halfway away from enabling proper tree shaking capability for your code.

The last thing, I need to share is the use of settings sideEffects keyword as false in your package.json file. Settings this will inform the webpack that your code/project is safe to exclude the re-exported classes/functions.

Please go through the webpack official documentation for more information on marking your project with sideEffects key.


In this article, we have seen how to use write code that can be tree shaken properly and setting sideEffects keyword in package.json to mark the project as safe to exclude the re-exported codes.

Happy coding.. 🙂


Angular Component styling – Using shadow piercing descendant selector

In this post, I am going to share how the shadow piercing descendant selector helped me with style scoping problem.

Well, I tried to create Angular wrapper for one of a JQuery plugin. All worked as planned and later I noticed that I was not able to apply custom styles to the plugin in ViewEncapsulation.Emulated mode. I can set the custom style when the ViewEncapsulation is set to None.

So I started to search for a solution to apply the custom style in ViewEncapsulation.Emulated mode.

What does ViewEncapsulation emulated mode actually do?

In ViewEncapsulation.Emulated mode, angular will try to emulate the style scoping feature of Shadow DOM. This is achieved by adding attribute to the element and style.

    selector: 'my-app',
    template: `
<h2>Hello {{name}}</h2>
    styles: [`h2 {
       color: red
export class App {
   constructor() { = `Angular! v${VERSION.full}`

Extra attribute will be added to the template elements as follows.



Why component style is not applied to the JQuery plugin?

Inside the plugin the element creation is done by JQuery instead of Angular. So the attributes used to emulate style scoping is not added to the elements.

To illustrate this, check the below code example in which the dynamic h2 element is appended in the ngAfterViewInit lifecycle.

    selector: 'my-app',
    template: `
<h2>Hello {{name}}</h2>
    styles: [`::ng-deep h2 {
      color: red
export class App {
     name:string; ele;
     constructor(eleRef: ElementRef) { = `Angular! v${VERSION.full}`
       this.ele = eleRef;
     ngAfterViewInit() {
       let dynam = document.createElement('h2');
       dynam.innerHTML = 'Dynamic content ' +;

The result will be as follow, you can see that the style from the component is not applied to the dynamically inserted h2 element.

Dynamic element insertion – style is not applied

Shadow piercing descendant selector to the rescue

To resolve the above depicted problem, you can use the shadow piercing descendant selector. It is a technique introduced in shadow DOM concept which is deprecated in major browsers.

But you can use this in Angular using the ::ng-deep special selector. This selector will apply the parent component styles to the descendant child components.

The encapsulation mode should be Emulated to use this feature in Angular

Now the component style should be modified as follows

::ng-deep h2 {
   color: red

The result will be as follows

Dynamic element insertion – with ::ng-deep selector




ES6 const is not immutable

1 xFJr7vK8l6adpUNe60AVJQ

Now most of the ES6 features can be used in modern browsers without transpiling. If you are using ES6 features in your project then you must have come across the const keyword.

Most of us know that the value assigned to the const cannot be changed. Yes, this is true when your are assigning primitive values.


But when comes with object type you can change the object’s property.


This proves that the const is not immutable and it cannot be reassigned or re-declared.

MDN says this clearly in their documentation.

The `const` declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

Happy Scripting…

Angular 2 @NgModule.scheme, what does it actually do?

When working with Angular 2 components, sometimes I came up with below error.


And googling tells me to set @NgModule.scheme as to CUSTOM_ELEMENTS_SCHEMA which resolve this issue.

So, for what purpose this scheme option is and what does it actually tells the Angular?

The NgModule’s scheme property tells the Angular compiler the type of component it wants to expect from the template. The available schema options are,



By default, the compiler will check for Angular components in its template. When the selector is not matched with any of its declarations then it will check for the value of schema property.

If the selector, you used, is an Angular component and still you are getting this issue then you should double check whether you have properly imported the directive/component in the declarations of NgModule as follows.

    selector: 'app-test',
    template: `Hello World`
export class TestComponent {

import { AppComponent, TestComponent }
from './app.component';

  declarations: [
  imports: [
  bootstrap: [AppComponent]
export class AppModule { }


This tells the compiler to allow any type of custom element in its template. The custom element should have hypen(-) so it’s attributes.

This helps to incorporate Web components other than Angular component in the application.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  . . . .
  bootstrap: [AppComponent],
export class AppModule { }

Its simple as the name implies it will not show error when there is an unknown selector in the template.

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

  . . . .
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
export class AppModule { }


Happy debugging.. 🙂

Height responsiveness using calc() CSS

I like to share a small use case of calc() CSS which helped me to achieve height responsiveness.

My use case is as follows

  1. A parent element with some static height.
  2. Three child elements (for reference let’s name them as c1, c2 and c3)which should fill the parent.
  3. Out of the three child elements, two of them(c1 & c3) will have static height and the c2 has to occupy the remaining space.
  4. And the c2 has to adjust its height on window resize without disturbing it’s siblings.

To achieve this, I need to calculate the height required by the c2, initially I tried the below solution to find the height.

  1. Calculate the sum of height of two child elements(c1 & c3).
  2. Calculate the height of parent element.
  3. Now height of the last child element calculated from the equation – height of parent – sum of height of c1 & c3 elements.
  4. Set the resultant height to the c2 child element.
  5. To auto adjust the height on window resize, register a resize callback and repeat the step 1 to 4.

Well, this method will work well but it could be done better.

How can it be done better?

Here comes the calc CSS. There are many usages available for calc CSS one of the them is unit mixing which is going to help me with this.

So my requirement will be achieved with the following steps.

  1. Calculate the sum of height of two child elements(c1 & c3).
  2. Now set the height to the c2 child element as height: calc(100% - height from step1).

That’s it. Now all the child elements will fit within its container whereas the c2 child will use the remaining space leave by c1 and c3.

Also it’s worth to note that this will allow the c2 element to adjust its height on window resize without using a resize event handler.


  1. MDN: calc CSS
  2. CSS Tricks: A couple of use cases for calc

Angular 2 – How to get template reference variable or directive instance inside component

In this post let us see how to get Angular 2 directive/child component instance inside the parent component class.

ViewChild in action
The ViewChild decorator can be used to achieve this requirement.
The ViewChild accepts either the directive type or the template reference variable as argument and set the directive instance to the target property after the view get initiated.

selector: 'child-cmp',
template: '


class ChildCmp {
doSomething() {}
selector: 'some-cmp',
template: '<child-cmp></child-cmp>',
directives: [ChildCmp]
class SomeCmp {
@ViewChild(ChildCmp) child:ChildCmp;
ngAfterViewInit() {
// child is set

The ViewChild will set the target property once the component view get rendered hence accessing the property before the view get initiated will return inappropriate result.

You can use the ngViewAfterInit lifecycle hook to identify the view initialization.

Argument as Directive type vs template variable
Using argument as template variable ViewChild is best from my point of view as it will provide access to specific directive instance when having more than one directive in the template.

selector: 'some-cmp',
template: '<child-cmp #child></child-cmp>',
directives: [ChildCmp]
class SomeCmp {
@ViewChild('child') child:ChildCmp;
ngAfterViewInit() {
// child is set

Happy Scripting.. 🙂

DOM creation and manipulation tips and tricks

In this post, I would like to share a simple DOM creation and manipulation technique which will provide some performance boost.

The goal of this post is to improve browser DOM manipulation performance by reducing unwanted reflow and repaint process. If you are unaware of them you should go through the below topic before getting started with this post.

Reflow and repaint

Use Document fragment
This is an already known technique. Using document fragment allow the separation of DOM creation from live document so that it will avoid unnecessary browser reflow and repaint.

var fragment= document.createDocumentFragment();

Clone nodes
Cloning already created element using cloneNode. This will be helpful when creating large number of same element. Mostly likely it can be used while creating table tr elements from JSON.

var fragment= document.createDocumentFragment();
var div = document.createElement("div");

Batch DOM update
Always batch the DOM update. Batch the DOM changes will reduce browser reflow and repaint.

Using requestAnimationFrame for DOM changes
This technique will provide a considerable performance when changing the live document. requestAnimationFrame will be used to update the DOM changes when the next reflow/repaint happens.
Normally it is introduced to do smooth animation experience in browser but here we can use this to do a single DOM update.

  document.body.appendChild( document.createElement("div") );

Use insertAdjacentHTML instead of innerHTML
This will be used when we need to append dynamic content to the same element.
We can use the innerHTML as follows.

var div = document.createElement("div");
div.innerHTML ="Hi" //<div>Hi</div>

div.innerHTML += " Dude"; //<div>Hi Dude</div>

But the above one have significant performance impact as it needs to re-parse all the child element already present.
To overcome this we can use insertAdjacentHTML which will append the inner HTML without touching the other elements. It only parses the new HTML need to be appended.

var div = document.createElement(&quot;div&quot;);
div.innerHTML = "Hi";  //<div>Hi</div>

div.insertAdjacentHTML("afterend", " Dude"); //<div>Hi Dude</div>

Following the above methods will provide a better performance in most of the modern browsers.

Happy scripting….

Deleter – Node based directory removing tool

My first node package deleter, has been released. Its a CLI, which is used to remove directories. I come up with idea to create this when i faced difficulties in deleting node_modules from my node based applications.


npm install deleter -g

Since it is a CLI, global installation is preferred.


deleter <directory-name>


deleter node_modules


For now, its target for windows operating system and other OS will be considered in upcoming updates.



Why new keyword should be used while instantiating JavaScript class

The new keyword is used to instantiate prototypical class or other objects. But why we need new keyword to initialize it, when you to try to initialize it without new will not throw any error at all then why should I use new before my class to instantiate it.

The answer is simple new keyword will set the ‘this’ to the new object created using function instead of global scope”.

If you didn’t provided new keyword then the context will be set to window(global scope).

You can see the difference in the below code example.

var fn = function (){
       this.a = 2;
       return this;

Instantiating fn without new keyword.

 var f = fn();  //`this` refers window here.

Instantiating fn with new keyword.

 var f = new fn();  //`this` refer object created by `fn` here.

Even though using new keyword is the best practice to instantiate class, most of the time, the users will skip them as it doesn’t provide any error at all.

We can use the below simple workaround to enforce the instantiating process using new keyword. Then the above fn will become as below.

 var fn = function (){
       if(!(this instanceof fn)) //workaround to resolve this problem.
          return new fn();
       this.a = 2;
       return this;

Now instantiating without new will also set this to the current object.

 var f = fn();  //this refer to fn here.

Instantiating class/function without new keyword in ES6 will throw TypeError.

Happy Scripting… 🙂

Some alternative use of bit wise operators

In this blog, I am just going to share some of the alternative use of the bitwise operators.

1. Replace Math.floor with double ~~.
Even though JavaScript Math library is well optimized, we can use the bitwise operators to reduce some keystrokes.

~~3.4 //result : 3

2. Convert to Boolean using !!
Double NOT operator is used to convert any type into Boolean.

var d = &amp;quot;Hi&amp;quot;;
!!d //result : true
var f = null;
!!f //result : false

3. Swap values without temp variable using XOR.
It is the one of the common method used to swap two variables without using temp variable.

var a = 5, b= 6;
a ^= b; b ^= a; a ^= b; //result a = 6, b = 5;

4. Using left and right shift with 1 bit to perform multiply and division.
Left shifting a number 1 bit is equivalent to the result obtained by multiplying it by 2 and right shifting 1 bit is equivalent to dividing it by 2.

var d = 4, f = 6;
d >> 1 //result : 4 * 2 = 8
f << 1 //result : 6 / 2 = 3

5. Checking odd/even using AND with 1
Performing AND operation with 1 will return value greater than 0 if its odd. We can use it simply to find whether a number is odd or even.

var a = 5, b= 6;
a & 1//result 1 - odd
b & 1//result 0 - even

Happy Scripting…