[SOLVED] Moralis Ethers and Web3UIKit Library occupying lots of bundle space on NextJs

Moralis General
#1

Hey guys,

I have built my nextjs file, however the first-load size is extremely large. In this bundle, a major chunk is ethers (which is from Moralis), and web3uikit.

They both together are using up over 2mb of space, which is massive. Currently, my first load size is 1.5 mb, and I’d like to get this down to under 100kb, and managing these two modules will really help.

I’m only using Contract from ethers, however, I’m not sure how I can use ES6 to only import that since I’m getting ethers from moralis like so: const ethers = Moralis.web3library.

This is my first load:

┌ ○ / (1046 ms)                            181 kB         1.41 MB
├   /_app                                  0 B            1.11 MB
├ ○ /404                                   241 B          1.11 MB
├ ○ /address                               928 B          1.23 MB
├ ○ /all (1027 ms)                         873 B          1.23 MB
├ ○ /profile (1007 ms)                     977 B          1.23 MB
└ ○ /search (1018 ms)                      1.21 kB        1.23 MB
+ First Load JS shared by all              1.11 MB
  ├ chunks/framework-38f22d267257f62d.js   45.1 kB
  ├ chunks/main-ee7948920624cbdc.js        31.2 kB
  ├ chunks/pages/_app-68b8ab65909399e4.js  1.03 MB
  ├ chunks/webpack-abc281d17b22c4fa.js     2.21 kB
  └ css/539945d44b9a9160.css               3.01 kB

This is my package.json:

  "dependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@next/bundle-analyzer": "^13.0.2",
    "dotenv": "^16.0.3",
    "framer-motion": "^7.6.5",
    "moralis-v1": "^1.11.0",
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "^1.4.2",
    "source-map-explorer": "^2.5.3",
    "web3uikit": "^0.1.159"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "url-loader": "^4.1.1"
  }

Do you have any idea how I can go about reducing this? Thanks!

#2

if ethers is all you use, you could try to import only ethers and use it directly

#3

This isn’t helping. It increased the bundle size to 1.2. I’m aware that you aren’t an expert in react, do you think someone else on the team would be able to to better judge the issue?

#4

There are ways to reduce this such as using dynamic imports. A goal of 100KB seems ambitious - is that based on anything?

#5

Not based on anything, but Nextjs recommends under 128kb. Regardless, I’d be happy getting it below 500kb at this point.

#6

I saw your post on stackoverflow, what have you specifically tried? An example of one page’s code and what you tried for that page would help since this issue is very specific to each project.

#7

Hey,

Thanks for looking at that. I made a post on Reddit as well and got some helpful insight. I’m going to try a bunch of things, including compression using Brotli or Gzip. Once I do all that, I’ll add a reply here with an example of the code, what I did, and the results.

Thanks again!

#8

Hey guys @cryptokid @alex

I got my bundle size <500kb from 1.5mb. Here’s how I did it:

  1. I was using web3uikit v1. I removed that and install @web3uikit/core instead. This removed all the bloat and kept only what I needed. This made a HUGE difference as web3uikit is a pretty big library. I’d say this reduced 400+kb.

  2. I removed /node_modules/ethers/node_modules. This folder contains @ethersproject, however this is not used. Moralis instead uses @ethersproject which is in the node_modules folder, so this was basically there for no reason. However, upon removing this, you will not be able to use ethers.utils.value, but it’s okay since you can use Moralis.Units instead. (this reduced about 200-300kb)

  3. I deployed the app on Vercel instead of Heroku. Vercel implements brotli/gzip compression, and this dramatically reduces the first load size.

My app is now hosted on vercel and its blazingly fast. For anyone else struggling with bundle-size when using Moralis, I highly recommend these steps.

Thanks!

1 Like