perf/no-whole-library-import

Dlaczego

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.

Poprawka

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.

Przykłady

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

Źródła

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

Przeczytaj w terminalu

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