chore: implement vendor chunk splitting for production builds #9886
Conversation
|
You have run out of free Bugbot PR reviews for this billing cycle. This will reset on January 3. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
Add strategic code splitting to reduce main bundle size from 11MB to 3.7MB (66% reduction) and improve browser caching efficiency. Changes: - Add splitChunks configuration with vendor cache groups: * vendors-react: React, Redux, Router (~168KB) * vendors-antd: Ant Design core (~1.6MB) * vendors-antd-icons: Ant Design icons (~150KB) * vendors-charts: Chart libraries (~264KB) * vendors-react-query: React Query (~47KB) * vendors-signozhq: SigNoz UI components (~338KB) * vendors-utilities: lodash-es, dnd-kit, dayjs, axios, i18next (~198KB) * vendors-monaco: Monaco editor (~11KB) * vendors-common: Other shared dependencies (~1.2MB) - Enable module concatenation for better tree-shaking - Update bundlesize.config.json with granular limits per chunk type - Restrict window.store exposure to development only Performance Impact: - Main bundle: 11MB → 3.7MB (66% reduction) - Total build: 250MB → 97MB (61% reduction) - Better browser caching (vendor chunks change less frequently) - Faster subsequent page loads (cached vendor chunks) Breaking Changes: None Migration: None required
YounixM
force-pushed
the
chore/build-optimizationss
branch
from
26256ff to
b797a35
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| }, | ||
| // Ant Design core (without icons) - matches antd and @ant-design but not @ant-design/icons | ||
| antd: { | ||
| test: /[\\/]node_modules[\\/](antd|@ant-design(?!\/icons))[\\/]/, |
There was a problem hiding this comment.
Regex excludes related @ant-design packages unintentionally
The negative lookahead (?!\/icons) in the antd cache group regex incorrectly excludes @ant-design/icons-svg and any other @ant-design package whose name starts with "icons". The lookahead checks if the next characters are /icons, but /icons-svg starts with /icons, causing the match to fail. This transitive dependency of @ant-design/icons will fall through to vendors-common or the main bundle instead of being grouped with antd packages, resulting in suboptimal chunk splitting and caching behavior.
1 participant
📄 Summary
Add strategic code splitting to reduce main bundle size from 11MB to 3.7MB (66% reduction) and improve browser caching efficiency.
Changes:
Performance Impact:
📋 Checklist
👀 Notes for Reviewers
Need to test all parts of the application for sign-off
Note
Introduces targeted code-splitting and size budgets to reduce bundle size and improve caching.
optimization.splitChunkswith vendor cache groups (vendors-react,vendors-antd,vendors-antd-icons,vendors-charts,vendors-react-query,vendors-utilities,vendors-monaco,vendors-common,vendors-signozhq) and runtime chunk naming (runtime~*)concatenateModules: truefor better tree-shakingbundlesize.config.jsonto granular per-chunk limits (e.g.,runtime~*.js,vendors-*,main.*.js,Home.*.js)window.storeexposure to development only insrc/store/index.tsWritten by Cursor Bugbot for commit b797a35. This will update automatically on new commits. Configure here.