Awesome Open Source
Awesome Open Source

Awesome Bundle Size Awesome

An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.

Contents

Concepts

Code Splitting

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.

Source: https://reactjs.org/docs/code-splitting.html

Tree Shaking

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

Source: https://webpack.js.org/guides/tree-shaking

Tools to analyze bundle size

General

Webpack

  • 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

CSS

Lodash

Tree Shaking

Using multiple techniques

Webpack

You Don't Need X

Code Splitting

Code Splitting guides

Documentation for bundlers and libraries

Videos and talks

Bundle size

Code Splitting

Tree Shaking

Webpack


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Webpack (9,732
Awesome (3,754
Awesome List (3,465
Performance (2,516
Code Splitting (241
Related Projects