Tree shaking Support Guide | Web3.js (original) (raw)

• 🧠 Advanced
• Tree Shaking 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:

note

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:

Step 4: Use Specific Packages​

1. Use the specific packages which you need,
   For example, if you need web.eth:

• JavaScript
• TypeScript

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

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

• JavaScript
• TypeScript

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

Example React App​

You can find an example app with tree shaking here.

PreviousExtending Web3.jsNextGetting started