kristerkari / awesome-bundle-size

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.
  • 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

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

About

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

License:Creative Commons Zero v1.0 Universal