Reduce bundle size

A core concern when developing frontend applications is to reduce the size of your assets.

The typescript SDK uses a lot of helpers under the hood. Luckily, most bundlers nowadays include dead code elimination and tree shaking, to allow you to only include code that you really use in your production build.

In order to strip away things that you don't need, make sure to always import functions from their full path.

In the example below we're only using a Substrate and Ethereum accounts, but using the global account imports we're effectively pulling every other chain that Aleph supports into our production build. Using a more specific path allows us to only use what we need, to effectively strip down the final production bundle size.

- import { accounts } from 'aleph-sdk-ts'
- const account_ETH = await accounts.ethereum.NewAccount()
- const account_DOT = await account.substrate.NewAccount()

+ import { NewAccount as NewETHAccount } from 'aleph-sdk-ts/dist/accounts/ethereum'
+ import { NewAccount as NewDOTAccount } from 'aleph-sdk-ts/dist/accounts/substrate'
+ const account_ETH = await NewETHAccount()
+ const account_DOT = await NewDOTAccount()

Last updated