Peer-avhengigheter og tree shaking

Peer-avhengigheter angir pakker som biblioteket ditt krever, men forventer at brukeren stiller til rådighet. I bibliotekets package.json hører React hjemme i peerDependencies, ikke i dependencies. Når en bruker installerer biblioteket ditt, installerer ikke npm/yarn React automatisk – brukerens app har allerede React, og biblioteket ditt deler den samme instansen.

Hvis React ligger i bibliotekets dependencies, kan npm installere en ekstra kopi av React ved siden av brukerens React. To React-instanser i samme app bryter alle hooks og gir feilen "Invalid hook call". Når du deklarerer React som en peerDependency, forteller du npm: «Jeg trenger React, men bruk den som brukeren allerede har.»

Noen peer-avhengigheter kan være valgfrie – for eksempel et bibliotek som støtter både styled-components og CSS Modules. Marker valgfrie peer-avhengigheter med peerDependenciesMeta: { 'styled-components': { optional: true } }. npm vil ikke advare brukerne om manglende valgfrie peer-avhengigheter, men TypeScript-typer kan fortsatt leveres når den valgfrie pakken er installert.

Feltet sideEffects i package.json forteller bundlere om biblioteket ditt er trygt å tree-shake. Hvis du setter "sideEffects": false, forteller du webpack, Rollup og lignende verktøy at import av en modul fra biblioteket ditt ikke forårsaker bivirkninger – alle ubrukte eksporter kan trygt fjernes fra brukerens bundle.

CSS-importer er en vanlig bivirkning – de injiserer stiler på siden som en bivirkning av at de importeres. Hvis biblioteket ditt importerer CSS-filer, setter du "sideEffects": ["*.css", "*.scss"] for å fortelle bundlere at JS-filer trygt kan tree-shakes, mens CSS-filer alltid må inkluderes når de importeres.

For maksimal tree-shaking bør du eksportere hver komponent som en navngitt eksport fra sin egen fil. I index.ts eksporterer du alt på nytt: export { Button } from './Button'. Når en bruker bare importerer Button, kan bundleren fjerne alle andre komponenter. Barrel-filer med re-eksporter muliggjør dette mønsteret.

Bruk bundlejs.com for å teste tree-shaking: lim inn import-setningen, så rapporterer tjenesten den faktiske bundlestørrelsen. npm-pakken size-limit lar deg definere størrelsesgrenser i package.json og få CI til å feile hvis importstørrelsen overskrider grensen: "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }].

Fastsett et størrelsesbudsjett for importene i biblioteket ditt. Kjør npx size-limit i CI for å håndheve det. Hvis du ser at bundlestørrelsen øker over tid, tyder det på at omfanget har sklidd ut. Et målrettet komponentbibliotek bør holde importene av enkeltkomponenter under noen få kilobyte. Varsle om regresjoner før de når brukerne.

Unngå styled-components og Emotion i komponentbiblioteker som skal distribueres. Disse CSS-in-JS-løsningene ved kjøring krever at brukeren installerer samme bibliotek og versjon, noe som skaper konflikter mellom peer-avhengigheter. Selv om brukeren benytter Tailwind eller vanlig CSS, må de fortsatt bundle CSS-in-JS-kjøretiden. Foretrekk CSS Modules, som kompileres til vanlig CSS under byggingen.

CSS Modules fungerer godt i biblioteker når de kombineres med en bundler som behandler dem. tsup og Rollup kan bygge utdata fra CSS Modules inn som avgrensede klassenavn. Brukeren trenger ikke å konfigurere noe – stilene er allerede avgrenset og inkludert i JS-bundlen, eller som en separat CSS-fil som importeres.

Dine egne utviklingsverktøy (tsup, TypeScript, testbiblioteker og Storybook) skal ligge i devDependencies – de trengs bare under utviklingen og utelates fra npm install for brukerne. React skal ligge både i peerDependencies (krav under kjøring) og devDependencies (nødvendig for å kompilere og teste biblioteket lokalt).

Deklarer React i peerDependencies (ikke dependencies), slik at brukerne deler React-instansen fra appen sin. sideEffects: false muliggjør full tree-shaking av biblioteket ditt. Bruk sideEffects: ['*.css'] for å beskytte CSS-importer mot å bli fjernet. Navngitte eksporter fra individuelle filer gir mest mulig finkornet tree-shaking. Håndhev et størrelsesbudsjett med size-limit i CI. Foretrekk CSS Modules fremfor CSS-in-JS i biblioteker for å unngå konflikter mellom peer-avhengigheter.