perf/no-whole-library-import

Why

The lodash package is CommonJS, so bundlers cannot drop the functions you do not use: even import { debounce } from 'lodash' ships the whole library. Moment.js is in maintenance mode and brings its locale data. Both add tens of kilobytes that every visitor downloads and parses.

Fix

Import from lodash-es (tree-shakable) or a single-method path (lodash/debounce), or replace the call with the platform (structuredClone, Array.prototype.flat, Object.groupBy). Replace Moment with Intl.DateTimeFormat and Intl.RelativeTimeFormat, or a small modular date library.

Examples

// bad
import { debounce } from 'lodash'
import moment from 'moment'
// good
import { debounce } from 'lodash-es'
const fmt = new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' })

Sources

• web.dev, Reduce JavaScript payloads with tree shaking
• MDN, Intl.DateTimeFormat

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/no-whole-library-import