awesome-bundle-size
github.com/kristerkari/awesome-bundle-size ↗📝 An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me code splitting guides resources from awesome-bundle-size"
Installation instructions →What's inside
Code Splitting
- Avoid this gotcha when code-splitting with TypeScript and WebpackCode Splitting guides
- Effective Code Splitting in React: A Practical GuideCode Splitting guides
- Lessons Learned: Code Splitting with Webpack and ReactCode Splitting guides
- Parcel - Code SplittingDocumentation for bundlers and libraries
Code Splitting
- React - Code-SplittingDocumentation for bundlers and libraries
Code-Splitting
- Reduce JavaScript Payloads with Code SplittingCode Splitting guides
Tools to help with Code Splitting
- Bundle Buddy
A tool to identify bundle duplication across splits.
Tools to analyze the cost of imports
- bundlejs
Find out how large your treeshaken dependencies are, while also getting the resulting bundled code is.
- bundlephobia
Find out the cost of adding a new frontend dependency to your project.
- Import Cost
Displays the import size of the package you are importing inside the code editor.
Tools to monitor the bundle size
- BundleMon
Free open-source tool that helps you to monitor your bundle size on every commit and alerts you on changes.
- BundleWatch
Keep watch of your bundle size.
- compressed-size-action
GitHub action that reports changes in compressed file sizes on your PRs.
- Harold
CLI tool that compares frontend project bundles in size.
- RelativeCI
Run in-depth bundle analyses and monitor webpack bundle size, assets, modules, and packages.
Tools to analyze bundle size
- Bundle optimize helperWebpack
A tool that will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
- size-pluginWebpack
Track compressed Webpack asset sizes over time.
- source-map-explorerGeneral
Analyze and debug space usage through source maps.
- Webpack Bundle AnalyzerWebpack
Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
- Webpack Bundle Size AnalyzerWebpack
A tool for finding out what contributes to the size of Webpack bundles.
- Webpack MonitorWebpack
A tool for monitoring webpack optimization metrics through the development process.
Videos and talks
- Code-splitting your way to better perf with Webpack in Totally Tooling TipsCode Splitting
- How to use Webpack Bundle AnalyzerWebpack
- Let's Tree-Shake It (aka Demystifying Tree-Shaking and Dead Code Elimination)Tree Shaking
- Managing Your Bundle Size - Totally Tooling TipsBundle size
Totally Tooling Tips
- Minimizing Bundle Sizes in ReactWebpack
- Neehar Venugopal - A Beginner's Guide to Code Splitting Your React App - React Conf 2017Code Splitting
A Beginner's Guide to Code Splitting Your React App - React Conf 2017
Bundle size optimization guides
- Here's how I reduced my bundle size by 90%Webpack
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of CodeWebpack
- How we reduced our initial JS/CSS size by 67%Using multiple techniques
- Optimising your application bundle size with webpackWebpack
- Optimizing Bundle size WebpackWebpack
- Put Your Webpack Bundle On A Diet - Part 1Webpack
Part 1
Showing a sample of 46 resources. View the full list on GitHub →