Investigate the impact of used packages on our final bundle size

[nedsalk]

For example, ethers takes 14kB in a production build of apps/demo-react-vite.

The easiest way to check the effect of a package on size is to go to apps/demo-react-vite/vite.config.ts and set the package as external in build.rollupOptions.external:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      external: ["ethers"]
    }
  }
})

This excludes that specific package from the build because it expects it to be provided from an external source instead of bundling it together with the app.

We can also use this approach to exclude our own packages that are included via "workspace:*" and to see how much each of them weighs.

This can help us in focusing our efforts for #1460.

[nedsalk]

The results below are for every dependency in all of our packages/*/package.json.
The values are in kB, minified + gzipped.
Let's take ethers as an example. It is being used in multiple packages and all those usages across all packages cumulatively have a 12.85 kB effect on the fuels umbrella package which is used as a dependency in demo-react-vite.

{
  "fuels": 186.83,
  "@fuel-ts/signer": 48.54,
  "elliptic": 48.16,
  "@fuel-ts/providers": 43.04,
  "bn.js": 22.09,
  "@fuels/vm-asm": 20.66,
  "@fuel-ts/wallet": 14.94,
  "ethers": 12.85,
  "@fuel-ts/math": 11.39,
  "graphql-request": 10.74,
  "@fuel-ts/utils": 10.66,
  "@fuel-ts/versions": 9.07,
  "semver": 9.02,
  "@fuel-ts/mnemonic": 8.29,
  "@fuel-ts/wordlists": 7.11,
  "@fuel-ts/crypto": 6.75,
  "@fuel-ts/abi-coder": 6,
  "tai64": 3.78,
  "@fuel-ts/transactions": 2.6,
  "@fuel-ts/hdwallet": 2.36,
  "@fuel-ts/contract": 2.07,
  "@fuel-ts/script": 1.91,
  "@fuel-ts/address": 1.9,
  "@fuel-ts/merkle": 1.68,
  "@fuel-ts/program": 1.36,
  "@fuel-ts/errors": 1.28,
  "bech32": 1.08,
  "graphql-tag": 0.81,
  "ramda": 0.62,
  "uuid": 0.3,
  "@fuel-ts/hasher": 0.27,
  "@fuel-ts/abi-typegen": 0,
  "@fuel-ts/forc": 0,
  "@fuel-ts/fuel-core": 0,
  "@fuel-ts/wallet-manager": 0,
  "@types/bn.js": 0,
  "bundle-require": 0,
  "chalk": 0,
  "chokidar": 0,
  "cli-table": 0,
  "commander": 0,
  "esbuild": 0,
  "ethereum-cryptography": 0,
  "events": 0,
  "glob": 0,
  "handlebars": 0,
  "joycon": 0,
  "lodash.camelcase": 0,
  "mkdirp": 0,
  "portfinder": 0,
  "rimraf": 0,
  "toml": 0,
  "tree-kill": 0,
  "type-fest": 0,
  "yup": 0,
  "@fuel-ts/predicate": -0.02,
  "graphql": -0.02,
  "@fuel-ts/interfaces": -0.05
}

[arboleya]

What are these numbers, KB? Minified + Gzipped?

[nedsalk]

@arboleya kB, minified + gzipped. I modified the comment to include that info.

[danielbate]

And "fuels": 186.83 represents the entire umbrella package size, inclusive of all dependencies?

[nedsalk]

And "fuels": 186.83 represents the entire umbrella package size, inclusive of all dependencies?

Yes.

[nedsalk]

Closing based on this comment.