2 Minuten mit Webpack-Baumschütteln und Reexport

Eintrag

Lass mich anfangen. Wir hatten ein monolithisches Frontend mit einem großen Erbe. Services lebten in denselben Dateien wie die Komponenten. Alles wurde mit dem Slogan an der Fassade verwechselt: "Lassen Sie alles zur Hand sein - es ist einfacher zu finden, was Sie brauchen." Und es spielt keine Rolle, dass die Dateilänge 200+, 300+, 500+ oder noch mehr Codezeilen beträgt.

Zweck

Machen Sie alles lesbarer, kleiner und schneller.

Implementierung

Das Prinzip der alleinigen Verantwortung besteht darin, alles Mögliche in Akten und die goldene Kugel zu trennen. Wenn wir eine Komponente und reine Funktionen in einer Datei haben, werden wir sie trennen.

Mit dem Aufkommen von ES6 + wurde es möglich, Import ... aus der Syntax zu verwenden - dies ist eine großartige Funktion, da wir auch Export ... aus verwenden können .

Refactoring

Stellen Sie sich eine Datei mit dieser Struktur vor:

// ,  ,       function multiply (a, b) { return a * b; } function sum (a, b) { return a + b; } function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2) ); } 

Wir können diesen Code folgendermaßen in Dateien aufteilen:

Struktur:

 utils multiply.js sum.js calculateSomethingSpecial.js 

und Dateien:

 // multiply.js export default function multiply (a, b) { return a * b; } or const multiply (a, b) => a * b; //    –     . 

 // sum.js export default function sum (a, b) { return a + b; } 

 // calculateSomethingSpecial.js import sum from "./sum"; export default function calculateSomethingSpecial(data) { return data.map( dataItem => sum(dataItem.param1, dataItem.param2)); } 

Jetzt können wir die Funktionen einzeln importieren. Aber mit zusätzlichen Zeilen und diesen langen Namen bei Importen sieht es immer noch schrecklich aus.

 // App.js import multiply from '../utils/multiply'; import sum from '../utils/sum'; import calculateSomethingSpecial from '../utils/calculateSomethingSpecial'; ... 

Aber dafür haben wir eine wunderbare Funktion, die mit dem Aufkommen der neuen JS-Syntax erschien, die als Reexport (Reexport) bezeichnet wird. In dem Ordner müssen wir eine index.js-Datei erstellen, um alle unsere Funktionen zu kombinieren. Und jetzt können wir unseren Code folgendermaßen umschreiben:

 // utils/index.js export { default as sum } from './sum'; export { default as multiply } from './multiply'; export { default as calculateSomethingSpecial } from './calculateSomethingSpecial'; 

Etwas podshamanim App.js:

 // App.js import { multiply, sum, calculateSomethingSpecial } from '../utils'; 

Fertig.

Testen.

Lassen Sie uns nun überprüfen, wie unsere Webpack-Kompilierungen für die Produktion erstellt werden. Erstellen wir eine kleine React-Anwendung, um zu testen, wie sie funktioniert. Wir werden prüfen, ob wir nur das herunterladen, was wir benötigen, oder alles, was in index.js angegeben ist, aus dem Ordner utils .

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { sum } from "./utils"; import "./styles.css"; function App() { return ( <div className="App"> <h1>Re-export example</h1> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Anwendung:

Produktionsversion der Anwendung:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); //    **sum**   var r = t(0) , a = tn(r) , c = t(2) , o = tn(c); function l(e, n) { return e + n } t(9); var u = document.getElementById("root"); oarender(aacreateElement(function() { return aacreateElement("div", { className: "App" }, aacreateElement("h1", null, "Re-export example"), aacreateElement("p", null, l(5, 10))) }, null), u) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.e2563e9c.chunk.js.map 

Wie Sie oben sehen können, haben wir nur die Summenfunktion von utils geladen.
Lassen Sie uns noch einmal überprüfen, und dieses Mal werden wir multiplizieren .

Anwendung:

Produktionsversion der Anwendung:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, t) { "use strict"; tr(n); var a = t(0) , r = tn(a) , c = t(2) , l = tn(c); t(9); var o = document.getElementById("root"); larender(racreateElement(function() { return racreateElement("div", { className: "App" //        React      }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, 50)) }, null), o) }, 3: function(e, n, t) { e.exports = t(10) }, 9: function(e, n, t) {} }, [[3, 1, 2]]]); //# sourceMappingURL=main.5db15096.chunk.js.map 

Hier sehen wir nicht einmal die Funktionen im Code, da Webpack unseren Wert bereits vor der Bereitstellung kompiliert hat.

Abschließender Test

Lassen Sie uns also unseren letzten Test durchführen und alle Funktionen gleichzeitig verwenden, um zu sehen, ob alles funktioniert.

 //  App.js import React from "react"; import ReactDOM from "react-dom"; import { multiply, sum, calculateSomethingSpecial } from "./utils"; import "./styles.css"; function App() { const specialData = [ { param1: 100, param2: 99 }, { param1: 2, param2: 31 } ]; const special = calculateSomethingSpecial(specialData); return ( <div className="App"> <h1>Re-export example</h1> <p>Special: </p> <div> {special.map((specialItem, index) => ( <div key={index}> Result #{index} {specialItem} </div> ))} </div> <p>{multiply(5, 10)}</p> <p>{sum(5, 10)}</p> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

Anwendung:

Produktionsversion der Anwendung:

 //   main.js   (window.webpackJsonp = window.webpackJsonp || []).push([[0], { 10: function(e, n, a) { "use strict"; ar(n); var t = a(0) , r = an(t) , l = a(2) , p = an(l); //    **sum** function c(e, n) { return e + n } a(9); var u = document.getElementById("root"); parender(racreateElement(function() { var e = [{ param1: 100, param2: 99 }, { param1: 2, param2: 31 //      **calculateSomethingSpecial** }].map(function(e) { //    **sum**   return c(e.param1, e.param2) }); return racreateElement("div", { className: "App" }, racreateElement("h1", null, "Re-export example"), racreateElement("p", null, "Special: "), racreateElement("div", null, e.map(function(e, n) { return racreateElement("div", { key: n }, "Result #", n, " ", e) //     **multiply** })), racreateElement("p", null, 50), //     **sum**   racreateElement("p", null, c(5, 10))) }, null), u) }, 3: function(e, n, a) { e.exports = a(10) }, 9: function(e, n, a) {} }, [[3, 1, 2]]]); vie 

Großartig! Alles funktioniert wie erwartet. Sie können jeden Schritt versuchen, indem Sie einfach den Link zu Codesandbox verwenden , und Sie können jederzeit direkt von dort aus Netlify bereitstellen .

Fazit

Verwenden Sie die Aufteilung des Codes in kleinere Teile und versuchen Sie, zu komplexe Dateien, Funktionen und Komponenten zu entfernen. Sie helfen sowohl der Zukunft selbst als auch Ihrem Team. Kleinere Dateien sind schneller zu lesen, leichter zu verstehen, einfacher zu warten, schneller zu kompilieren, einfacher zu zwischenspeichern, schneller herunterzuladen usw.

Danke fürs Lesen! Sauberer Code und üppiges Refactoring!