Skip to main content

Tree shaking Support Guide

Step 1: Enable Production Mode

  1. Use the production mode configuration option to enable various optimizations including minification and tree shaking. Set your webpack.config:

Step 2: Configure sideEffects Property

  1. Add a sideEffects property to your project's package.json file:
"sideEffects": false

For further information about sideEffects see webpack docs

Step 3: Set tsconfig Module to ES2015

  1. Set your tsconfig module to ES2015 or higher to support imports, because tree shaking does not work with require:
"module": "ES2015"

Step 4: Use Specific Packages

  1. Use the specific packages which you need,

    For example, if you need web.eth:

import { Web3Eth } from 'web3-eth';
// ...

If you only need a few functions from web3-utils:

import { numberToHex, hexToNumber } from 'web3-utils';
// ...

Example React App

You can find an example app with tree shaking here.