Peer-Dependencies und Tree Shaking

Peer-Abhängigkeiten deklarieren Pakete, die Ihre Bibliothek benötigt, deren Bereitstellung sie aber vom Nutzer erwartet. In der package.json Ihrer Bibliothek gehört React in peerDependencies, nicht in dependencies. Wenn ein Nutzer Ihre Bibliothek installiert, installiert npm/yarn React nicht automatisch — die App des Nutzers verfügt bereits über React, und Ihre Bibliothek verwendet dieselbe Instanz.

Wenn React in den dependencies Ihrer Bibliothek steht, installiert npm möglicherweise eine zweite Kopie von React neben der React-Instanz des Nutzers. Zwei React-Instanzen in derselben App führen bei allen Hooks zum Fehler "Invalid hook call". Indem Sie React als peerDependency deklarieren, teilen Sie npm mit: „Ich benötige React, aber verwenden Sie die Instanz, die der Nutzer bereits hat.“

Einige Peers können optional sein — zum Beispiel eine Bibliothek, die sowohl styled-components als auch CSS Modules unterstützt. Markieren Sie optionale Peers mit peerDependenciesMeta: { 'styled-components': { optional: true } }. npm warnt Nutzer dann nicht vor fehlenden optionalen Peers, aber TypeScript-Typen können weiterhin bereitgestellt werden, wenn das optionale Paket installiert ist.

Das Feld sideEffects in package.json teilt Bundlern mit, ob Ihre Bibliothek sicher per Tree-Shaking reduziert werden kann. Mit "sideEffects": false teilen Sie webpack, Rollup und ähnlichen Tools mit, dass das Importieren eines beliebigen Moduls aus Ihrer Bibliothek keine Nebenwirkungen verursacht — alle nicht verwendeten Exporte können sicher aus dem Bundle des Nutzers entfernt werden.

CSS-Importe sind eine häufige Nebenwirkung — sie injizieren beim Import als Nebeneffekt Stile in die Seite. Wenn Ihre Bibliothek CSS-Dateien importiert, setzen Sie "sideEffects": ["*.css", "*.scss"], um Bundlern mitzuteilen, dass JS-Dateien sicher per Tree-Shaking reduziert werden können, CSS-Dateien beim Import jedoch immer eingeschlossen werden müssen.

Für maximales Tree-Shaking exportieren Sie jede Komponente als benannten Export aus einer eigenen Datei. Exportieren Sie in Ihrer index.ts alles erneut: export { Button } from './Button'. Wenn ein Nutzer nur Button importiert, kann der Bundler alle anderen Komponenten entfernen. Barrel-Dateien mit Re-Exports ermöglichen dieses Muster.

Verwenden Sie bundlejs.com, um Tree-Shaking zu testen: Fügen Sie Ihre Import-Anweisung ein, und die tatsächliche Bundle-Größe wird angezeigt. Mit dem npm-Paket size-limit können Sie in Ihrer package.json Größenbudgets definieren und CI fehlschlagen lassen, wenn die Importgröße das Limit überschreitet: "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }].

Legen Sie ein Größenbudget für die Importe Ihrer Bibliothek fest. Führen Sie npx size-limit in CI aus, um es durchzusetzen. Wenn die Auswirkungen des Bundles im Laufe der Zeit zunehmen, deutet das auf eine Ausweitung des Umfangs hin. Eine fokussierte Komponentenbibliothek sollte einzelne Komponentenimporte unter einigen Kilobyte halten. Melden Sie Regressionen, bevor sie die Nutzer erreichen.

Vermeiden Sie styled-components und Emotion in Komponentenbibliotheken, die Sie verteilen möchten. Diese CSS-in-JS-Lösungen zur Laufzeit erfordern, dass Nutzer dieselbe Bibliothek und Version installieren, was zu Konflikten bei Peer-Abhängigkeiten führt. Auch wenn der Nutzer Tailwind oder einfaches CSS verwendet, muss er die CSS-in-JS-Laufzeitumgebung weiterhin bündeln. Bevorzugen Sie CSS Modules, die zur Build-Zeit in einfaches CSS kompiliert werden.

CSS Modules funktionieren gut in Bibliotheken, wenn sie mit einem Bundler kombiniert werden, der sie verarbeitet. tsup und Rollup können die Ausgabe von CSS Modules als bereichsbezogene Klassennamen inline einbinden. Nutzer müssen nichts konfigurieren — die Stile sind bereits eingeschränkt und im JS-Bundle enthalten oder werden als separate CSS-Datei importiert.

Ihre eigenen Entwicklungswerkzeuge (tsup, TypeScript, Testbibliotheken, Storybook) gehören in devDependencies — sie werden nur während der Entwicklung benötigt und bei npm install für Nutzer nicht installiert. React gehört sowohl in peerDependencies (Anforderung zur Laufzeit) als auch in devDependencies (zum lokalen Kompilieren und Testen Ihrer Bibliothek).

Was teilen Sie Bundlern mit, wenn Sie "sideEffects": false in der package.json einer Bibliothek festlegen?

Deklarieren Sie React in peerDependencies (nicht dependencies), damit Nutzer die React-Instanz ihrer App gemeinsam verwenden. sideEffects: false ermöglicht vollständiges Tree-Shaking Ihrer Bibliothek. Verwenden Sie sideEffects: ['*.css'], um CSS-Importe vor dem Entfernen zu schützen. Benannte Exporte aus einzelnen Dateien maximieren die Tree-Shaking-Granularität. Setzen Sie mit size-limit in CI ein Größenbudget durch. Bevorzugen Sie in Bibliotheken CSS Modules gegenüber CSS-in-JS, um Konflikte bei Peer-Abhängigkeiten zu vermeiden.