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:

'mode':'production'

Step 2: Configure sideEffects Property

2. Add a sideEffects property to your project's package.json file:

"sideEffects": false

note

For further information about sideEffects see webpack docs

Step 3: Set tsconfig Module to ES2015

3. 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

4. Use the specific packages which you need,

   For example, if you need web.eth:

JavaScript

const { Web3Eth } = require('web3-eth');
// ...

TypeScript

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

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

JavaScript

const { numberToHex, hexToNumber } = require('web3-utils');
// ...

TypeScript

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

Example React App

You can find an example app with tree shaking here.