DEV Community: Milek Agrawal

Tree shaking in Javascript

Milek Agrawal — Wed, 21 Sep 2022 12:09:04 +0000

JavaScript is an expensive resource to process. It needs to be parsed, compiled, and then finally executed. This makes JavaScript more expensive to process.

There are techniques to improve JavaScript performance. Code splitting is one such technique that helps in improving performance by partitioning JavaScript into chunks, and serving those chunks to only the routes of an application that need them.

Though this technique works, it doesn't address a common problem of JavaScript-heavy applications, which is the inclusion of code that's never been used. Tree shaking helps in solving this problem.

Tree shaking is a method of optimising our code by eliminating any code from the final bundles that isn’t actually being used.

Let’s say we have a stringUtils.js file with some operations we may want to use in our main script.

export function capitaliseFirstLetter(word) {
    return (word.charAt(0).toUpperCase() + word.slice(1))
}

export function getInitials(name) {
    if (name) {
        return name
            .split(' ')
            .map((n) => n[0])
            .join('')
    }
    return ''
}

export function truncateString(string, len) {
    const truncatedString = string.substring(0, len)
    return `${truncatedString}...`
}

In our main script, we may only ever import and use the truncateString() function.

import { truncateString } from "./stringUtils";

truncateString('sample string', 10);

After the bundling, we will see that all functions from the file are included in the final bundle, even though we only imported and used the truncateString function.

But with tree shaking enabled, only what is imported and actually used will make it to the final bundle.

Although the concept of tree shaking has been around for a while, it has only been able to work with Javascript since the introduction of ES6-style modules. This is because tree shaking works iff the modules are static.

Before going forward, let's get some understanding on static and dynamic modules. When you use a module as static module, you are instantiating and using it for across the application. So, even though a component might not be using it, there is still some performance cost associated with it because anytime we try to access that, the namespace of that module will be available. Dynamic module imports are very similar to static module imports, but the code is loaded only when it is needed instead of being loaded instantly.

Before the introduction of ES6 modules, we had CommonJS modules which used the require() syntax to import the modules. These modules are dynamic, meaning that we are able to import new modules based on conditions in our code.

var myDynamicModule;

if (condition) {
    myDynamicModule = require("foo");
} else {
    myDynamicModule = require("bar");
}

The dynamic nature of the CommonJS modules meant that tree shaking couldn’t be applied because it would be impossible to determine which modules will be needed before the code actually runs.

In ES6, a completely new syntax for modules was introduced, which is entirely static. Using the import syntax, we cannot dynamically import a module. We need to define all imports in the global scope, outside of any conditions. This new syntax allows for effective tree shaking, as any code that is used from an import can be determined even before running the code.

Tree shaking in most of the good code bundlers is pretty good at eliminating as much unused code as possible. For example, modules that are imported but not used are eliminated.

Some libraries also suggest to use the submodules for imports instead of the module which prevents the bundling of unused code. Here is one such example from @vueuse.

Though, tree shaking helps to eliminate the unused code but it doesn’t solve the problem of unused code entirely.

Things to consider while using Tree shaking:

Tree shaking cannot tell on its own which scripts are side effects, so it’s important to specify them manually.

Side effect is a code that performs some action when imported but not necessarily related to any export. A very good example of a side effect is polyfill. Polyfills typically don’t provide an export, but rather added to the project as a whole.

Tree shaking is typically implemented via some code bundler. Each code bundler has a different way of enabling tree shaking. If you’re using webpack, you can simply set the mode to production in your webpack.config.js configuration file. This will, among other optimisations, enables tree shaking.

module.exports = {
    ...,
    mode: "production",
    ...,
};

To mark any file as side effect, we need to add them to our package.json file.

{
    ...,
    "sideEffects": [
        "./src/polyfill.js"
    ],
    ...,
}

Modules that are being used as side effects cannot be tree shaken because they don’t have imports and exports.
But, it is not important to be a module to have side effects. Take the following code as an example:

// src/sideEffect.js
export const foo = "foo";

const sideEffectFn = (text) => {
  fetch("/api");
  return `${text}!!`;
};

export const bar = sideEffectFn("Hello");
// src/index.js
import { foo } from "./sideEffect";

console.log(foo);

The bar variable will trigger a side effect as it is initialised. Webpack will realise this and will include the side effect code in the bundle, even though we aren’t using bar at all.

In this article, we covered tree shaking in general, example of its usage using Webpack and how to make common patterns tree-shakable.

I hope this article helped all of us understand tree shaking easily. To learn more, visit the MDN docs.

Love reading about Javascript, Web optimisations, Vue.js, React, and Frontend in general? Stay tuned for more.

Wanna connect? You can find me on LinkedIn, Twitter, GitHub.

Javascript Proxy: Introduction

Milek Agrawal — Wed, 21 Sep 2022 12:05:49 +0000

JS is not truly an Object Oriented Programming language. Therefore fulfilling requirements such as Enforcing object property value validation during read and write and take action, defining a property as private, and detecting changes in values can be challenging. There are ways of solving the above-stated problems, such as by using a setter or getter to set default value or throw an error on validation checks. However, the more convenient way to handle these problems is by using the Proxy object.

Proxies are one of the hidden gems in Javascript that many developers do not know of. The Proxy object is a virtualising interface that allows us to control the behaviour of the object. It allows us to define custom behaviour for the basic operations of an object. Let's take an example to understand proxy in a better way.

Let us consider an item as shown below.

let item = {
    id: 1231,
    name: 'Stock',
    price: 136
}

We want to sell this item but the condition is that the selling price should not be less than 100. At the same time, we want to put a check in place that throws the error if we try to read the value of a property that does not exist. Also, we want to define id as private property.

We can easily solve this problem by writing custom logic while performing get, set ,or property lookup. JS Proxy object exactly helps here. It allows us to add custom behaviour to the fundamental operations on a JS object.

To create a proxy object, we use the Proxy constructor and pass two parameters(target and handler) in it. Defining a Proxy object:

let proxy = new Proxy(target, handler);

Target is the object which is virtualised using Proxy and adds custom behaviour to it. Here, item object is the target.

Handler is the object in which we define the custom behaviour. The handler object container the trap.

Traps are the methods that gives access to the target object’s property to the handler object. Traps are optional. If trap is not provided, target object’s default methods are used. There are different types of traps such as get, set, has, isExtensible, defineProperty, etc. You can use all of these traps in the handler to define the custom behaviour for target object.

let item = {
    id: 1231,
    name: 'Stock',
    price: 136
}

let handler = {
    // check while setting the value
    set: function(obj, prop, value) {
        if(prop === 'price') {
             if( !Number.isInteger(value)){
                throw new TypeError('Value passed is not a number');
            }
            if(value < 100){
                obj[prop]= 100;
                return true; 
            }
        }
        obj[prop]= value;
        return true; 
    },

    // check for no access to `id`
    // check for property which does not exist
    get: function(obj, prop) {
        if(prop == 'id'){
            throw new Error('Cannot access private property : id');
        }
        else {
            return prop in obj ?
            obj[prop] : new TypeError (prop + ' : property does not exist');
        }
    }
}

var itemProxy = new Proxy(item, handler);

Let's understand the code. We created a proxy called itemProxy using the Proxy constructor and passed the item and handler to it.

Using the get trap in the handler, we are checking if the property exists in the object or not. Also, we have enforced id as private property and made it inaccessible.
Using the set trap in the handler, we are checking if the property passed is price, if the value being passed to assign is an integer and also, we are putting a modifier to assign the value 100 by default if the price is less than 100.

console.log(itemProxy.price); // 136
itemProxy.price = 45; 
console.log(itemProxy.price); // 100

In a similar manner, we can define handlers to detect changes to the value of object properties which we will discuss some other time.

I hope this article helped all of us understand Proxies. To learn more, visit the MDN docs.

Love reading about Javascript, Web optimisations, Vue.js, React, and Frontend in general? Stay tuned for more.

Wanna connect? You can find me on LinkedIn, Twitter, GitHub.

DS: Using Bitwise Operators in Programming

Milek Agrawal — Sat, 30 May 2020 01:48:36 +0000

If you've programmed before, you must have used some kind of numeric data type, such as an integer. But have you ever thought about how our computer actually stores these numbers? Instead of storing the data as decimal, computers store values using the binary system. Now, there are some operators that specifically act on the bits of the numbers in binary form, aptly named as Bitwise Operators. Now before going to these operators, we should know where these bit manipulation tactics are used. Computer programming tasks that require bit manipulation include low-level device control, error detection and correction algorithms, data compression, encryption algorithms, and optimization. For most other tasks, modern programming languages allow the programmer to work directly with abstractions instead of bits that represent those abstractions. In C and C++ we can work with these bits effectively.

In this article, we will first see each bit operation and then we will see some commonly used methods for solving the problems.

There are 6 bitwise operators namely:

Operator	Description
`A & B`	Bitwise AND
`A \| B`	Bitwise OR
`A ^ B`	Bitwise Exclusive-OR
`A << B`	Bitwise Left Shift
`A >> B`	Bitwise Right Shift
`~A`	Bitwise Complement

Let’s go through the six bitwise operators one by one.

Bitwise AND operator `&`

The bitwise AND tests two binary numbers and returns bit values of 1 for positions where both numbers had a 1 and bit values of 0 where both numbers did not have 1. Let us see the bitwise AND operation of two integers 12 and 23.

12 = 00001100 (In binary)
23 = 00010111 (In binary)

  00001100
& 00010111
  ---------
  00000100 = 4 (In decimal)

Bitwise OR operator `|`

The bitwise OR tests two binary numbers and returns bit values of 1 for positions where either bit or both bits are 1 and the result of 0 when both bits are 0. Let us see the bitwise OR operation of two integers 12 and 23.

12 = 00001100 (In binary)
23 = 00010111 (In binary)

  00001100
| 00010111
  ---------
  00011111 = 31 (In decimal)

Bitwise Exclusive-OR operator `^`

The bitwise Exclusive-OR(commonly known as XOR) tests two binary numbers and returns bit values of 1 for positions where both bits are different. If both bits are the same then the result is 0. Let us see the bitwise XOR operation of two integers 12 and 23.

12 = 00001100 (In binary)
23 = 00010111 (In binary)

  00001100
^ 00010111
  ---------
  00011011 = 27 (In decimal)

Bitwise Left Shift operator `<<`

The bitwise left shift moves all bits in the number to the left and fills vacated bit positions with 0. Let us take an example of the left-shift operator on integer 23.

23 = 00010111 (In binary)

  00010111
 << 2 (left shift by 2 bits)
  ---------
  01011100 = 92 (In decimal)

Bitwise Right Shift operator `>>`

The bitwise right shift moves all bits in the number to the right. The vacated positions after the right shift will be filled with 0 only when the value is unsigned. If the value is signed, the vacated position after the right shift will be filled with the sign bit or 0, depending on the implementation-defined in the problem. Let us take an example of the right-shift operator on integer 23.

23 = 00010111 (unsigned binary number)

  00010111
 >> 2 (right shift by 2 bits)
  ---------
  00000101 = 5 (In decimal)

Bitwise Complement operator `~`

The bitwise complement inverts the bits in a single binary number. Let us take an example of the complement operator on integer 23.

23 = 00010111 (In binary)

  00010111
 ~
  ---------
  11101000 = 232 (In decimal)

Some frequently used methods in Bitwise programming

Checking K^th Bit

Let the given number be n. To check the K^th bit we can use the expression: n & (1 ≪ K-1). If the expression is true then we can say the Kth bit is set. That means, K^th bit is set to 1.

n = 00101100
K = 3
1 << K-1 (00000100)

n & (1 << k-1) = (00000100)

Setting K^th Bit

Let the given number be n. For setting the K^th bit we can use the expression: n | (1 ≪ K-1).

n = 00101000
K = 3
1 << K-1 (00000100)

n | (1 << k-1) = (00101100)

Clearing K^th Bit

Let the given number be n. To clear the K^th bit we can use the expression: n & ~(1 ≪ K-1).

n = 00101100
K = 3
1 << K-1 (00000100)
~(1 << K-1) (11111011)

n & ~(1 << k-1) = (00101000)

Toggling K^th Bit

Let the given number be n. To toggle the K^th bit we can use the expression: n ^ (1 ≪ K-1).

n = 00101100
K = 3
1 << K-1 (00000100)

n ^ (1 << k-1) = (00101000)

Multiplying Number by 2^K

Let the given number be n. To multiply the number with 2^K, we can use the expression: n << K.

n = 00000011 (In binary) or 3 (In decimal)
K = 3

(n << K) = 00011000 (In binary) or 24 (In decimal)

Dividing Number by 2^K

Let the given number be n. To divide the number with 2^K, we can use the expression: n >> K.

n = 00011000 (In binary) or 24 (In decimal)
K = 3

(n >> K) = 00000011 (In binary) or 3 (In decimal)

Toggling Rightmost 1 Bit

Let the given number be n. To toggle the rightmost 1 bit, we can use the expression: n & (n-1).

n = 00101101
n-1 = 00101100

n & (n-1) = (00101100)

Isolating Rightmost 1 Bit

Let the given number be n. To isolate the rightmost 1 bit, we can use the expression: n & -n.

n = 00101101
-n = 11010011

n & -n = (00000001)

Here, we use 2's complement representation for computing -n. We can compute 2's complement using the expression -n = ~n + 1.

Isolating Rightmost 0 Bit

Let the given number be n. To isolate the rightmost 0 bit, we can use the expression: ~n & (n+1).

n = 00101101
~n =  11010010
n+1 = 00101110
~n & (n+1) = (00000010)

Some interesting problems to solve using bitwise operations.

Find the element that appears once

Find the missing number

XOR Linked List

Reverse Bits

Divide Integers

Single Number

Different Bits Pairwise Sum

And that's it!

We've seen what bit manipulation is, operators involved in bitwise operations, and some frequently used methods for solving the questions. Whether you're new to bitwise operations or refreshing your knowledge, I hope this deep dive has been a good companion in understanding how bit manipulation works.

If you have any questions, feel free to leave a response or drop me a tweet!

DEV Community: Milek Agrawal

Tree shaking in Javascript

Things to consider while using Tree shaking:

Javascript Proxy: Introduction

DS: Using Bitwise Operators in Programming

Bitwise AND operator &

Bitwise OR operator |

Bitwise Exclusive-OR operator ^

Bitwise Left Shift operator <<

Bitwise Right Shift operator >>

Bitwise Complement operator ~