TreeShaking in Javascript

Treeshaking is a technique through which we can eliminate redundant code.As project grows bigger more code gets added to the repository and the bundle size goes on increasing.

Webpack has the feature to remove unused code via its various plugins and treeshaking depends upon the way code is written.If the code is written in commonjs format using require.

With esnext module system we can easily write a code that can be treeshaken using import and exports syntax.

Lets create a little demo project in which we can test treeshaking.

npm init -y
npm install --save-dev typescript ts-loader webpack webpack-cli

these commands will install our dependencies. Lets add tsconfig.json and webpack config in our root directory. Also we will be creating a src folder which will have our components.

// webpack.config.js
const path = require("path");
module.exports = {
  mode: "production",
    entry: "./src/index.tsx",
      output:{
        filename: "[name].js",
        path: path.resolve(__dirname, "build"), 
         publicPath: "/",
      },
  module: {
   rules: [{
      test: /\.(ts|tsx)$/,
      exclude: /node_modules\/(?!()\/).*/,
      use: {loader: "ts-loader"},
     },
   ],
  },
 resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
}
};

Now lets create index.tsx in which we will have components imported that would have our code to be treeshaken. This is how our index.tsx will look like

// index.tsx
import {one} from "./components/way1";
import two from "./components/two";
export default {
one,
two
}

So there are two ways we can export our code one is named export and another one is default export. In case of named export we only export small part of function or statements which are the imports as { uuu }.

whereas in case in of default one we will have all the contents in single object and the is imported as the second line import two from ‘./components/two’;

the content for way1.tsx will be like this, in this all functions are exported individually i.e as named export

// components/way1.tsx
export const one = function(){console.log("one")}
export const two = function(){console.log("two")}
export const three = function(){console.log("three")}
export const four = function(){console.log("four")}
export const five = function(){console.log("five")}

whereas in case of default export contents would be.

// components/way2.tsx
const one = function(){console.log("one")}
const two = function(){console.log("two")}
const three = function(){ console.log("three") }
const four = function(){ console.log("four") }
const five = function(){ console.log("five")}
export default {
 one,
 two,
 three,
 four,
 five
}

In this case for treeshaking to work either we have to make it as named export of we can have individual files with each export init like this .

// components/two.tsx
import way2 from "./way2"
const two = way2.two
export default two;

now if we import from /two.tsx treeshaking would work for such default exports also.

Now lets add script to build our project in package.json

// package.json
"build": "webpack — config webpack.config.js"

after build process the final bundle will have code like this where in your code will be treeshaken.

code in final build

In this way we can write a code that can remove unused code automatically on build and our bundle size will also reduce.

This is how whole project directory be

project structure

you can find the code related to this article in this repo

shubhadip/webpack_treeshaking