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.

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

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

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