Reduced size of application & improved performance plays an important role in success of a software. Tree Shaking is a concept in development of eliminating dead code or unused code.<\/p>\n\n\n\n
Imagine your application as a tree. All the libraries, components, widgets & code represents leaves. All the unused code, imports & dead code represents the dead brown leaves. In order to clear dead leaves from trees you have to shake the tree to let them fall.<\/p>\n\n\n\n
By implementing tree shaking practices website performance will get improved and reduce bundle size. Tree shaking depends on the static structure of ES6 module syntax (import & export).<\/p>\n\n\n\n
The reason tree shaking is very important is because most packages installed don’t really need all dependencies & this results in importing full packages, however what really needed is a small part of that package.<\/p>\n\n\n\n
Lets have an example:<\/p>\n\n\n\n
Importing lodash<\/strong> package using CommonJS Module. This import will fetch entire package & all the un required dependencies.<\/p>\n\n\n\n Importing lodash package using ES6 (ES2015)<\/strong> Module. This import will only fetch specific dependency with tree shaking.<\/p>\n\n\n\n As seen in example above the size of bundle is drastically reduced in ES6 import as compared to CommonJS module import.<\/p>\n\n\n\n If your project is built with create-react-app, the latest version has excellent tree shaking, if you are using an old version of react just update react-scripts to version 2.0.4 or higher.<\/p>\n\n\n\n In order to implement tree shaking in react application you will need to have a module bundler that will bundle the entire app\u2019s code. You can either use WebPack or RollUp for bundling your application.<\/p>\n\n\n\n webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript. Webpack takes modules with dependencies and generates static assets representing those modules. Webpack uses the To achieve tree shaking, webpack<\/strong> requires some configuration. Create a file name A Side-effect is defined as code that performs a special behavior when imported, other than exposing one or more exports. Side effects occur when a function or expression modifies state outside its own context. <\/p>\n\n\n\n If all of application code does not contain side effects, we can simply mark the property as false<\/em><\/strong> to inform webpack that it can safely prune unused exports.<\/p>\n\n\n\n If your code have some side effects, an array can be provided in configuration instead:<\/p>\n\n\n\n Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the standardized ES module format for code, instead of previous idiosyncratic solutions such as CommonJS.<\/p>\n\n\n\n If you are using Rollup<\/strong> as your module bundler then by default it supports tree-shaking and does not require any additional configuration. Rollup statically analyzes the code you are importing, and will exclude anything that isn’t actually used. This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project.<\/p>\n\n\n\nconst lodash = require('lodash'); 70.7K (gzipped: 24.7k)<\/em><\/code><\/p>\n\n\n\nimport {isArray} from 'lodash'; 1K (gzipped: 505)<\/em><\/code><\/p>\n\n\n\nTree Shaking in React Application<\/strong><\/h4>\n\n\n\n
npm install react-scripts@latest --save<\/code><\/p>\n\n\n\nWebpack<\/strong><\/h4>\n\n\n\n
babel-preset-env<\/code> package, which bundles your files and transforms the files back to CommonJS<\/strong> module to support tree-shaking.<\/p>\n\n\n\nwebpack.config.js<\/code> and add below code:<\/p>\n\n\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: \/\\.(js|jsx)$\/,\n exclude: \/node_modules\/,\n use: {\n loader: babel-loader,\n options: {\n presets: [\n [ 'es2015', { modules: false }]\n ]\n }\n }\n }\n ]\n }\n}<\/code><\/pre>\n\n\n\nConfigure the file in side-effect<\/h4>\n\n\n\n
{\n \"name\": \"example-project\",\n \"sideEffects\": false\n}<\/code><\/pre>\n\n\n\n{\n \"name\": \"example-project\",\n \"sideEffects\": [\n \".\/src\/file-with-side-effect.js\",\n \"*.css\"\n ]\n}<\/code><\/pre>\n\n\n\nRollup<\/strong><\/h4>\n\n\n\n