Ich erstelle eine gemeinsam nutzbare React-Komponentenbibliothek.
Die Bibliothek enthält viele Komponenten, aber der Endbenutzer muss möglicherweise nur einige davon verwenden.
Wenn Sie Code mit Webpack (oder Parcel oder Rollup) bündeln, wird eine einzige Datei mit dem gesamten Code erstellt .
Aus Leistungsgründen möchte ich nicht, dass der gesamte Code vom Browser heruntergeladen wird, es sei denn, er wird tatsächlich verwendet. Habe ich Recht, wenn ich denke, dass ich die Komponenten nicht bündeln sollte? Sollte die Bündelung dem Verbraucher der Komponenten überlassen werden? Überlasse ich dem Verbraucher der Komponenten noch etwas? Transpiliere ich nur die JSX und das wars?
Wenn dasselbe Repo viele verschiedene Komponenten enthält, was sollte in main.js enthalten sein?
imported
im Code enthalten waren, wodurch die Bundle-Größe verringert wird.Antworten:
Dies ist eine extrem lange Antwort, da diese Frage eine extrem lange und detaillierte Antwort verdient, da die "Best Practice" -Methode komplizierter ist als nur eine Antwort in wenigen Zeilen.
Ich habe unsere internen Bibliotheken in dieser Zeit mehr als 3,5 Jahre lang unterhalten. Ich habe mich auf zwei Arten entschieden. Ich denke, Bibliotheken sollten gebündelt werden. Die Kompromisse hängen davon ab, wie groß Ihre Bibliothek ist. Persönlich stellen wir beide Möglichkeiten zusammen, um beide Untergruppen von zu befriedigen Verbraucher.
Methode 1: Erstellen Sie eine index.ts-Datei mit allem, was exportiert werden soll, und einem Ziel-Rollup für diese Datei als Eingabe. Bündeln Sie Ihre gesamte Bibliothek in eine einzige Datei index.js und index.css. Mit externen Abhängigkeiten, die vom Consumer-Projekt geerbt wurden, um Doppelarbeit im Bibliothekscode zu vermeiden. (Inhalt unten in der Beispielkonfiguration enthalten)
import { Foo, Bar } from "library"
Methode 2: Dies ist für fortgeschrittene Benutzer: Erstellen Sie für jeden Export eine neue Datei und verwenden Sie Rollup-Plugin-Multi-Input mit der Option "keepModules: true", je nachdem, welches CSS-System Sie verwenden, müssen Sie dies auch sicherstellen Ihr CSS wird NICHT in eine einzelne Datei zusammengeführt, aber dass jede CSS-Datei die Anweisung (". css") erfordert, bleibt nach dem Rollup in der Ausgabedatei und diese CSS-Datei ist vorhanden.
next-transpile-modules
Paket npm.import { Foo,Bar } from "library"
mit Babel transformieren können ...Wir haben mehrere Rollup-Konfigurationen, bei denen wir tatsächlich beide Methoden verwenden. Für Bibliothekskonsumenten, die sich nicht für das Schütteln von Bäumen interessieren, können sie einfach
"Foo from "library"
die einzelne CSS-Datei importieren. und für Bibliothekskonsumenten, die sich um das Schütteln von Bäumen kümmern und nur kritisches CSS verwenden, können sie einfach unser Babel-Plugin aktivieren.Rollup-Anleitung für Best Practice:
ob Sie Typoskript verwenden oder nicht IMMER mit
"rollup-plugin-babel": "5.0.0-alpha.1"
erstellen Stellen Sie sicher, dass Ihre .babelrc so aussieht.Und mit dem Babel Plugin im Rollup sieht es so aus ...
Und Ihr package.json sieht mindestens so aus:
Und schließlich sehen Ihre externen Geräte im Rollup mindestens so aus.
Warum?
Schließlich finden Sie hier eine Übersicht über eine Beispiel-Rollup-Konfigurationsdatei für die Ausgabe einer einzelnen index.js-Datei. https://gist.github.com/ShanonJackson/deb65ebf5b2094b3eac6141b9c25a0e3 Wo das Ziel src / export / index.ts so aussieht ...
Lassen Sie mich wissen, wenn Sie Probleme mit Babel, Rollup oder Fragen zu Bundling / Bibliotheken haben.
quelle
Es ist möglich, für jede Komponente separate Dateien zu generieren. Webpack verfügt über eine solche Fähigkeit, indem mehrere Einträge und Ausgaben definiert werden. Angenommen, Sie haben die folgende Struktur eines Projekts
Die Webpack-Datei würde ungefähr so aussehen
Weitere Informationen zum Thema "Code-Aufteilung" finden Sie hier in den Webpack-Dokumenten
Es gibt ein einzelnes Feld in der
package.json
Datei mit dem Namenmain
. Es ist gut, den Wertlib/index.js
entsprechend der obigen Projektstruktur zu setzen . Und inindex.js
Datei haben alle Komponenten exportiert. Wenn der Verbraucher eine einzelne Komponente verwenden möchte, ist dies einfach zu erreichenNun, es liegt an dir. Ich habe festgestellt, dass einige React-Bibliotheken auf originelle Weise veröffentlicht werden, andere auf gebündelte Weise. Wenn Sie einen Erstellungsprozess benötigen, definieren Sie ihn und exportieren Sie die gebündelte Version.
Hoffe, alle deine Fragen sind beantwortet :)
quelle
Sie können Ihre Komponenten wie lodash aufteilen für ihre Methoden tut.
Was Sie wahrscheinlich haben, sind separate Komponenten, die Sie separat oder über die Hauptkomponente importieren können.
Dann könnte der Verbraucher das gesamte Paket importieren
oder seine Einzelteile
Verbraucher erstellen ihre eigenen Bundles basierend auf den von ihnen importierten Komponenten. Das sollte verhindern, dass Ihr gesamtes Bundle heruntergeladen wird.
quelle
Sie sollten einen Blick darauf werfen Bit . Ich denke, dies ist eine gute Lösung, um Komponenten zu teilen, wiederzuverwenden und zu visualisieren.
Es ist sehr einfach einzurichten. Sie können Ihre Bitbibliothek oder nur eine Komponente installieren mit:
Anschließend können Sie die Komponente in Ihre App importieren mit:
Das Gute daran ist, dass Sie sich nicht um die Konfiguration von Webpack und all dem Jazz kümmern müssen. Bit unterstützt sogar die Versionierung Ihrer Komponenten. Dieses Beispiel zeigt eine Reaktionskomponente in der Titelliste, damit Sie überprüfen können, ob diese Ihren Anforderungen entspricht oder nicht
quelle
In Webpack gibt es eine Konfiguration zum Erstellen von Blockdateien. Zunächst wird das Hauptpaket in mehrere Blöcke unterteilt und bei Bedarf geladen. Wenn Ihr Projekt über gut strukturierte Module verfügt, wird kein Code geladen, der nicht benötigt wird.
quelle