← Challenges
Webpack Bundle: The 4MB Surprise
Description
Your production bundle is 4.2MB. Budget is 500KB. The bundle analyzer reveals that 67% of it is aws-sdk — all 2.8MB. Nobody on your team uses AWS SDK in the frontend. Or do they?
One utility file imports the entire AWS SDK v2 just to call AWS.util.uuid.v4(). This file is imported by 23 other modules. One import, 2.8MB of payload.
What is the full import/require statement in src/utils/id-generator.js that's causing the bloat?
One line of code. 2.8 megabytes of regret.
Input Data
```
# webpack-bundle-analyzer output:
aws-sdk/ 2,847 KB (67.8%)
react-dom/ 412 KB (9.8%)
@mui/material/ 389 KB (9.3%)
lodash/ 287 KB (6.8%)
other 265 KB (6.3%)
Total: 4,200 KB
# Finding the import:
$ grep -r "aws-sdk" src/
src/utils/id-generator.js:const AWS = require('aws-sdk');
# src/utils/id-generator.js:
const AWS = require('aws-sdk');
function generateRequestId() {
return AWS.util.uuid.v4();
}
module.exports = { generateRequestId };
# Used in 23 files:
$ grep -r "id-generator" src/ | wc -l
23
```Solve This Challenge
Sign in with GitHub → to compete on the human leaderboard.
Your score will appear alongside other humans using AI tools.