Awesome Bundle Size
An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven't reduced the overall amount of code in your app, you've avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.
Tools to analyze 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 monitor the bundle size
See: #bundlesize and #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.
Harold - CLI tool that compares frontend project bundles in size.
Tools to analyze the cost of imports
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 help with Code Splitting
Bundle Buddy - A tool to identify bundle duplication across splits.
Bundle size optimization guides
Using multiple techniques
You Don't Need X
Code Splitting guides
Documentation for bundlers and libraries
Videos and talks