Webpack 4: Universelles Code-Splitting in React… Die Erfinder sind zurück, Baby!

css-chunks-webpack-plugin extrahieren — das bisher beste CSS-Chunking-Plugin (Webpack 4, eigenständig, SSR-freundlich, HMR eingebaut)!


Ich bin mir sicher, dass wir alle schon einmal auf das unvermeidliche Problem gestoßen sind: „Ich möchte meine React-App serverseitig rendern, aber ich möchte wirklich auch Code-Splitting.“ – Willkommen in der Hölle.

Ich selbst, wie viele, viele andere in der React-Community, stand vor demselben Dilemma.

Und viele von uns haben wahrscheinlich auf React 17 gewartet, um den Tag zu retten … laut den Jungs, die daran arbeiten, ist es noch ein langer Weg. Es flossen Tränen, man stellte sich der Realität 😂.

Lassen Sie mich Ihnen vorstellen.

  • Ich bin ein Senior Frontend Engineer bei Fiverr’ s Forschungs- und Entwicklungsabteilung mit Sitz in NYC. Ich trage sowohl zum Produkt als auch zur Plattform bei.
  • Davor war ich Gründungsmitglied einer Digitalagentur. Von der Garage zum erfolgreichen Geschäft mit einem eigenen Gebäude, 50–60 Mitarbeitern, die dort arbeiten, und schließlich der Ausweitung der Geschäftstätigkeit auf drei Kontinente.
  • Ich hatte das Vergnügen, mit komplexen Architekturen für Unternehmen in den USA zu arbeiten und diese letztendlich zu entwerfen 20 Mrd. $ Angebot.
  • Ich mag komplexe Sachen, nicht kompliziert, Komplex.

Was habe ich gewählt?

Es gab Optionen da draußen, um die beste Wahl zu finden, habe ich eine Liste mit Grundanforderungen zusammengestellt.

  • Granulare Steuerung & Flexibilität
  • Skalierbar und spielt schön mit containerisiert die Architektur
  • Robust zum Plattform Entwicklung, Tag für Tag Einfachheit für Feature-Entwicklung.
  • Möglichkeit zum Zugriff auf ausführliche Ausgaben von Low-Level-API s

Ziemlich schwer zu finden, besonders wenn man es mit dieser neuen Begeisterung zu tun hat Micro-Frontend-Architektur. Ich brauche etwas, das Architekten genauso lieben wie Junior-Entwickler.

Ich habe mich für die Universal Family von FaceySpacey entschieden (James Gilmore). Die Universal Family gab mir das Beste aus beiden Welten.

Ich ging mit dem Erfinder, nicht mit irgendeiner anderen Bibliothek. Ich habe jedoch nicht nur Universal verwendet. Ich habe mich mit seinem Autor zusammengetan. Unermüdlich arbeiten und sich das Privileg verdienen, offiziell ein Erhalter der Universellen Familie zu sein.

Ich habe verfolgt James Gilmore und seine Arbeit für eine sehr lange Zeit. Für diejenigen unter Ihnen, die es nicht wissen, Webpack’s resolveWeak, das war James zu verdanken. Es war SEINE Pull-Anfrage. Im Wesentlichen ist er der verdammte Erfinder des Code-Split-Server-Side-Rendering für React. Jede andere Lösung, die ich mir angesehen hatte, wurde gerade verwendet resolveWeak. Verstehen Sie mich nicht falsch, Forks und Anpassungen sind ein wichtiger Bestandteil einer gesunden Open-Source-Community. Verdammt, ich verzweige und iteriere die ganze Zeit über Open-Source-Code.

Während unsere Lösung bei der anfänglichen Implementierung komplexer ist, bietet sie langfristig mehr Flexibilität:

  • Sie können verwenden dynamische Ausdrücke Innenimporte
  • Schaffen Benutzerland-HOCs
  • Hebezeug Statik
  • Doppelt rendern mit Apollo
  • Hebelkraft Rückrufe beim Rendern
  • Split-Reduzierer
  • Usw…

Universal unterstützt eine Fülle von Funktionen, für die andere Code-Splitting-Pakete Workarounds benötigen, um sie zu erreichen.

Universal ist robust und funktionsreich, während die anderen Lösungen minimal sind.


Universal und Webpack 4 – eine Geschichte von zwei Builds

Nachdem ich eine ziemlich fantastische POC-Node-Infrastruktur mit atemberaubender Code-Aufteilung und einer unglaublich einfachen Methode zur Code-Aufteilung für Entwickler eingerichtet hatte, konnte ich mit Sicherheit sagen, dass ich mit meinem kleinen Experiment ziemlich zufrieden war. Patchen von Problemen auf dem Weg, um Universal für große, komplizierte Systeme bereit zu machen.

Aber dann wurde Webpack 4 veröffentlicht. Webpack 4 hat so ziemlich alles neu geschrieben, wenn man bedenkt, dass wir ein Code-Spitting-System waren … Universal funktionierte nicht, als ich versuchte, zu aktualisieren. Spiel ist aus?

Die Universal Family unterstützt jetzt aggressives Code-Splitting!

Am 4. Juni 2018 haben wir ein großes Update von veröffentlicht babel-plugin-universal-import was jetzt Unterstützt Webpaket 4

Am 5. Juni 2018 haben wir ein großes Update von veröffentlicht css-chunks-webpack-plugin extrahieren was jetzt Unterstützt Webpack 4

Am 12. Juni 2018 haben wir ein großes Update von veröffentlicht Webpack-Flush-Chunks das ermöglicht Entwickler, Universa zu verwenden l mit komplexer / aggressives Code-Splitting Taktik.

Also, wie haben wir das gelöst?

Ja schon, css-chunks-webpack-plugin extrahierenwar das Hauptproblem … Wir brauchten eine Webpack 4-Lösung für CSS-Chunking.

Wir alle wissen, dass Webpack irgendwann in der Zukunft für eine bessere Handhabung von CSS vorgesehen ist. Wir wissen nicht wann, aber niemand scheint es bald zu sagen. Darauf können wir uns also nicht verlassen Vaporware

Schauen Sie sich die Universal-Familie an (beginnen Sie hier):

Ich bin sicher, Sie denken, „Verwenden Sie einfach den Mini-CSS-Extrakt.“ Ja. Ich habe das versucht, und es hat die Aufgabe des Code-Splittings von CSS erledigt, aber es war so nein Neuladen von Hot-Modulen ( HMR )…. Autsch

„Aber es gibt einen Style-Loader, benutze ihn einfach für Entwickler-Builds!“
Nun ja, das gibt es. Aber komm schon

  • Keine Quellkarten
  • Stile können in Chrome-Entwicklungstools nicht bearbeitet werden
  • Zeichenfolgeninjektion in das DOM
  • Stile überschreiben Stile, wenn mehr Inline-Code angehängt wird.
  • Nicht etwas, was seriöse Unternehmen mögen


Die Verwendung von style-loader

Bei Fiverr oder jedem großen Unternehmen gibt es einige vernünftige Ziele, die ich erreichen möchte.

Im Rahmen von CSS möchte ich Folgendes:

  • ich DX verbessern und Risiko mildern.
  • Vermeiden Sie so viele Inkonsistenzen zwischen Lokal und Produktion.
  • Vermeiden Sie schwer zu debuggen CSS, zusätzlicher Speicher und Verlangsamungen im Kunden.
  • Nicht in die kaskadierende Güte von CSS eingreifen (Stile in einer vererbbaren Reihenfolge halten)
  • Verbessern Sie das Langzeit-Caching
  • Beschleunigen Sie Builds

Du brauchst Entwickler baut fungieren als nah wie möglich zu Produktion baut. Sie benötigen ein gutes End-to-End-System, das der Hitze des hohen Datenverkehrs standhält. Sich auf einen Build verlassen das ist nicht so so nah wie möglich an der Produktion öffnet dich Risiko Sie dürfen nur fangen, nachdem Sie a eingesetzt haben 100.000 $ Fehler.

Was nützt ein großartiges System, wenn die DX (Developer Experience) nicht da ist, wo sie sein muss? Ich habe mich umgesehen, wie man Mini-CSS-Extract Hot Reload erstellt. Ehrlich gesagt war ich enttäuscht, nicht von der großartigen Arbeit von Sokra, sondern von der Tatsache, dass es einfach mehr Arbeit und immer noch klobig ist. Ich will nur, dass es funktioniert. Wie im Ernst, was wird heutzutage nicht HOT nachgeladen 😂

Die Lösung

Im Wesentlichen nahmen wir Mini-CSS, änderten es ein wenig und fügten die automatische HMR-Injektion hinzu.

Aber wieso? Und warum nicht einfach PR an Webpack zurückschicken?

Eine berechtigte Frage. Ich werde es in zwei Teilen beantworten.

Warum Mini-CSS-Extrakt verwenden und ändern?

  • Die API ist vertraut, weniger Reibung und Drop-in-Ersatz.
  • Es ist gut geschrieben, schnell, einfach.
  • Der Autor von Webpack war direkt beteiligt.

Warum nicht PR Webpack?

  • Ich werde. Aber das ist jetzt nicht ideal für unsere Agenda.
  • Ich möchte die Architektur von Universal kontrollieren.
  • Mini-CSS scheint niedrige Priorität zu haben, es ist eine Notlösung, bis Webpack CSS nativ handhabt, was sie für einen bestimmten Punkt in der Zukunft geplant haben.
  • Mini-CSS wird sich wahrscheinlich im Laufe der Zeit ändern, unsere Anwendungsfälle und Agenden passen möglicherweise nicht zusammen.

**FaceySpacey ist zurück** – die Wahrheit ist, dass er nie wirklich verlassen. Er hat alle Hände voll zu tun mit aufregenderen Dingen. Universal ist fantastisch, und jetzt können wir mit einem engagierten Team schneller innovativ sein, uns besser um unsere treuen Angehörigen kümmern und unsere ultimativen Ziele erreichen, den React-Workflow zu verbessern.

Ein großer Teil davon ist Rudi (früher redux-first-router)

Rudy hat nicht mehr viel auf der Aufgabenliste! Rudy ist jedoch nur einer von ihnen drei lebenswichtige Teile von Response-Framework was, wie wir hoffen, die Entwicklung von React wirklich verändern wird.

Wir sind nur ein Team aus Programmierern. Unsere Belohnung für all diese Arbeit ist ziemlich einfach. Wir sind alle Programmierer und wir wollen einfach nur ein paar Tools entwickeln, die unser Leben einfacher machen, und wir wollen im Gegenzug auch euer aller Leben einfacher machen. React ist fantastisch, aber es ist Zeit für seinen „Rails“-Moment. Es ist Zeit für das nächste große Ding.

Folge mir auf Twitter ScriptedAlchemy

Ich habe die meiste Zeit meines Lebens in Kapstadt, Südafrika, verbracht. Wo technologische Zwänge vieles unmöglich erscheinen ließen, klingt dieses Zitat zutreffend.

Similar Posts

Leave a Reply

Your email address will not be published.