Tree Shaking [1000 USDC Reward!]

[MaxMillington]

🐛 Bug Bounty: Tree Shaking Optimization Needed! 🛠️
Reward: 🏆 1000 USDC 🏆

We are thrilled to announce a special bug bounty for proficient third-party developers! This is an opportunity to showcase your expertise, make a significant impact, and earn a substantial reward.

Issue Description 📄
Inefficient Tree Shaking in Next.js Application

Current Behavior ❌
Our Next.js application is currently importing libraries that are not in use due to ineffective tree shaking. This results in an unnecessarily large bundle size, affecting performance and efficiency.

Expected Behavior 💡
Implement an optimized tree shaking process to ensure only the necessary libraries are included in the final bundle. The goal is to significantly reduce the bundle size without compromising functionality.

Requirements for the Bounty 🏁

Submit a pull request with a verified solution to optimize tree shaking.
Demonstrate a measurable decrease in the bundle size as a result of your optimization.
Ensure the fix does not introduce any new bugs or vulnerabilities.
Adhere to our project's coding style and contribution guidelines.
Your solution will undergo a thorough review by our team, and the bounty will be awarded upon approval.

How to Claim Your Bounty 💰

Fork our repository.
Create a new branch dedicated to your optimization fix.
Submit a pull request to our main branch with comprehensive details of your optimization strategy and evidence of the reduced bundle size.

Upon review and approval, the 1000 USDC will be transferred to your wallet.

Please Note: All bounty claimants must undergo a KYC (Know Your Customer) process with our finance team to receive the reward. This is a mandatory step to ensure compliance with financial regulations.

We eagerly await your innovative solutions and thank you for contributing to the efficiency and performance of our project!

[isreallee82]

for some reason I couldn't build the project @MaxMillington here is a screenshot

I dont know if I am doing something wrong

[MaxMillington]

@isreallee82 give it another try. should be able to build and run from stage branch

[isreallee82]

yes thanks @MaxMillington I guess there was an issue with my enviroment worked on codespace

[BrianCraig]

Hi!

Analyzing the Next.js application's performance and bundle size, I've identified a critical aspect that seems to heavily influence the initial load and bundle size. Upon reviewing the application's loading metrics, I've noticed a significant portion of the bundle size attributed to the _app.tsx file, which appears to be highly coupled with multiple dependencies.

Considering the statistics below:

Route (pages) Size First Load JS
┌ ● / 923 B 2.09 MB
├ /_app 0 B 2.09 MB
├ ○ /404 (582 ms)                                       448 B          2.09 MB
├ ○ /500 (550 ms)                                       444 B          2.09 MB
├ λ /api/active-gauges                                  0 B            2.09 MB
├ λ /api/bridge-transfer/quotes                         0 B            2.09 MB
├ λ /api/bridge-transfer/quotes/[bridge]                0 B            2.09 MB
├ λ /api/bridge-transfer/transaction-requests/[bridge]  0 B            2.09 MB
├ λ /api/broadcast-transaction                          0 B            2.09 MB
├ ℇ /api/edge-trpc/[trpc]                               0 B            2.09 MB
├ ℇ /api/pools                                          0 B            2.09 MB
├ ℇ /api/pools/[id]                                     0 B            2.09 MB
├ λ /api/router/token-out-given-in                      0 B            2.09 MB
├ λ /api/simulate-transaction                           0 B            2.09 MB
├ λ /api/trpc/[trpc]                                    0 B            2.09 MB
├ ● /apps (ISR: 86400 Seconds) (554 ms)                 186 B          2.09 MB
... (other routes omitted for brevity)

  First Load JS shared by all 2.11 MB
  ├ chunks/7056-995831a93aefcb61.js 82.6 kB
  ├ chunks/7101-1b1047194f005759.js 2 MB
  ... (other chunks omitted for brevity)

The _app.tsx file seems to contribute significantly to the overall bundle size, making the initial load substantial and potentially impacting performance. I'm considering a strategy that involves decoupling _app.tsx from unnecessary dependencies and optimizing its structure to facilitate more effective tree shaking.

Before proceeding further with this approach, I wanted to seek confirmation if such solution would be considered as enough to solve the bounty.

Thank you, Brian.

[MaxMillington]

Hi Brian!

Apologies for the slow reply, we were out last week!

Your approach is reasonable. We are aiming to reduce the bundle size by at least 30%

[Nightrider0098]

Is this issue still open? @MaxMillington

[MaxMillington]

@Nightrider0098 Yes.

[Nightrider0098]

Will try to work on this. And try to remove or load library dynamically.

[Nightrider0098]

The first load file is about 2.12 MB(/static/chunks/_app-*.js). Bundle analyser show this data

Can we declare our own type definitions and make our libraries like [proto-codecs] tree shakable ?

[MaxMillington]

@Nightrider0098 yes, one strategy would to be replace some of these with our own smaller bundles

[Nightrider0098]

What is the expected size for the final initial-load file?

[MaxMillington]

@Nightrider0098 we are aiming to reduce the bundle size by at least 30%

[jonator]

We believe tree shaking is now working from server and stores package