awesome-bundle-size
📝 An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
https://github.com/kristerkari/awesome-bundle-size
Last synced: about 20 hours ago
JSON representation
-
Bundle size optimization guides
-
CSS
-
Lodash
-
Tree Shaking
-
Using multiple techniques
-
Webpack
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- Webpack: Optimizing Your Bundle Size
- Here's how I reduced my bundle size by 90%
- Optimizing Bundle size Webpack
- Put Your Webpack Bundle On A Diet - Part 1
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- How I Cut My React JavaScript Bundle Size In Half With Three Lines of Code
- Optimising your application bundle size with webpack
- Put Your Webpack Bundle On A Diet - Part 1
- Put Your Webpack Bundle On A Diet - Part 2
- Put Your Webpack Bundle On A Diet - Part 3
- Put Your Webpack Bundle On A Diet - Part 4
-
You Don't Need X
-
-
Code Splitting
-
Code Splitting guides
- Reduce JavaScript Payloads with Code Splitting
- Effective Code Splitting in React: A Practical Guide
- Lessons Learned: Code Splitting with Webpack and React
- Avoid this gotcha when code-splitting with TypeScript and Webpack
- Reduce JavaScript Payloads with Code Splitting
- Avoid this gotcha when code-splitting with TypeScript and Webpack
-
Documentation for bundlers and libraries
-
-
Tools to analyze bundle size
-
General
- source-map-explorer - Analyze and debug space usage through source maps.
-
Webpack
- Bundle optimize helper - A tool that will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
- Webpack Bundle Analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
- Webpack Bundle Size Analyzer - A tool for finding out what contributes to the size of Webpack bundles.
- size-plugin - Track compressed Webpack asset sizes over time.
- Webpack Monitor - A tool for monitoring webpack optimization metrics through the development process.
- Bundle optimize helper - A tool that will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
-
-
Tools to analyze the cost of imports
-
Webpack
- bundlejs - Find out how large your treeshaken dependencies are, while also getting the resulting bundled code is.
- Import Cost - Displays the import size of the package you are importing inside the code editor.
- bundlephobia - Find out the cost of adding a new frontend dependency to your project.
-
-
Tools to help with Code Splitting
-
Webpack
- Bundle Buddy - A tool to identify bundle duplication across splits.
-
-
Tools to monitor the bundle size
-
Webpack
- #bundlesize - size](https://github.com/topics/bundle-size) on GitHub._
- compressed-size-action - GitHub action that reports changes in compressed file sizes on your PRs.
- BundleWatch - Keep watch of your bundle size.
- RelativeCI - Run in-depth bundle analyses and monitor webpack bundle size, assets, modules, and packages.
- Harold - CLI tool that compares frontend project bundles in size.
- BundleMon - Free open-source tool that helps you to monitor your bundle size on every commit and alerts you on changes.
-
-
Videos and talks
-
Bundle size
-
Code Splitting
-
Tree Shaking
-
Webpack
-
Programming Languages
Categories
Sub Categories
Keywords
webpack
7
bundle
3
javascript
3
size
2
treemap
2
bundle-size
2
bundlesize
2
tree-shaking
1
pure-function
1
moment-js
1
esmodules
1
date-fns
1
webpack-plugin
1
webpack-assets
1
performance-budget
1
utilities
1
underscore
1
reduceright
1
native
1
lodash
1
lastindexof
1
javascript-methods
1
isnan
1
findindex
1
eslint-plugin
1
alternatives
1
monitor
1
github
1
file-size
1
web-optimization
1
rollup
1
parcel
1
webperf
1
vscode
1
performance-visualization
1
performance-analysis
1
performance
1
perfmatters
1
source-map
1
minification
1
website
1
codesplitting
1
plugin
1
optimization
1
monitoring
1
analyzer
1
webpack-bundle-analyzer
1
interactive
1
chart
1
analyze
1