easyPerformanceReact

The bundle bloat

A developer asked an AI assistant to add a debounce utility to a form component. The suggested import works correctly, but the production bundle size jumps by over 70KB for what should be a single small function.

SearchInput.jsx

import _ from 'lodash';

function SearchInput({ onSearch }) {
  const debouncedSearch = _.debounce(onSearch, 300);
  return <input onChange={(e) => debouncedSearch(e.target.value)} />;
}

Why does this import add roughly 70KB to the production bundle for just one function?

import _ from 'lodash' pulls in the entire library, which isn't reliably tree-shakeable in its default build: bundlers can't remove the hundreds of unused functions.

React re-bundles Lodash separately for every component that imports it.

debounce internally imports every other Lodash function to build its internal cache.

The bundler treats onChange handlers as entry points, duplicating the whole library.