Awesome Bundle Size

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

Contents

• Concepts
  • Code Splitting
  • Tree Shaking
• Tools to analyze bundle size
  • General
  • Webpack
• Tools to monitor the bundle size
• Tools to analyze the cost of imports
• Tools to help with Code Splitting
• 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

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

• source-map-explorer - Analyze and debug space usage through source maps.

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.
• RelativeCI - Run in-depth bundle analyses and monitor webpack bundle size, assets, modules, and packages.
• BundleMon - Free open-source tool that helps you to monitor your bundle size on every commit and alerts you on changes.

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 help with Code Splitting

• Bundle Buddy - A tool to identify bundle duplication across splits.

Bundle size optimization guides

CSS

• Reducing CSS bundle size 70% by cutting the class names and using scope isolation

Lodash

• Smaller Lodash bundles with Webpack and Babel

Tree Shaking

• Reduce JavaScript Payloads with Tree Shaking
• Webpack - Tree Shaking

Using multiple techniques

• How we reduced our initial JS/CSS size by 67%

Webpack

• Optimising your application bundle size with 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
• 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

• You don't (may not) need Lodash/Underscore
• You don't (may not) need Moment.js
• You Might Not Need jQuery

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

Documentation for bundlers and libraries

• Webpack - Code Splitting
• Parcel - Code Splitting
• React - Code-Splitting

Videos and talks

Bundle size

• Managing Your Bundle Size - Totally Tooling Tips

Code Splitting

• Code-splitting your way to better perf with Webpack in Totally Tooling Tips
• Neehar Venugopal - A Beginner's Guide to Code Splitting Your React App - React Conf 2017

Tree Shaking

• Let's Tree-Shake It (aka Demystifying Tree-Shaking and Dead Code Elimination)

Webpack

• Webpack Tips - Totally Tooling Tips
• How to use Webpack Bundle Analyzer
• Minimizing Bundle Sizes in React