Implementierung der Codeaufteilung von Webpack3+React16

Projekthintergrund

Seit kurzem gibt es ein Projekt mit einer älteren Webpack-Version. Da das Upgrade und die Framework-Änderung von der Führungsebene vorerst nicht akzeptiert werden o(╥﹏╥)o, kann es nur unter den bestehenden Bedingungen optimiert werden.

webpack3 + reagieren16

Webpack v3-Konfigurationsprüfung

Es ist offensichtlich, dass die Projektkonfiguration von v1 übernommen wird. Das Upgrade von v1 auf v3 ist relativ einfach. Weitere Informationen finden Sie auf der offiziellen Website https://webpack.js.org/migrate/3/.

Lader werden zu Regeln
Verkettete Loader werden nicht mehr unterstützt und JSON-Loader müssen nicht konfiguriert werden.
Das UglifyJsPlugin-Plugin muss die Minimierung aktivieren

Analysieren Sie vorhandene Paketprobleme

Nach dem Erstellen des Pakets mit webpack-bundle-analyzer, wie in der Abbildung gezeigt

Das Problem liegt auf der Hand:

Mit Ausnahme des größeren Pakets zxcvbn ist der Code einfach in Anbieter und App gepackt und die Datei ist sehr groß.

Dynamischer Import-Split-Lieferant

Analysieren Sie den Anbietercode. Einige große Pakete, wie z. B. libphonenumber.js, werden nicht häufig verwendet. Nehmen Sie sie heraus und fordern Sie sie an, wenn die relevanten Funktionen verwendet werden.

Weitere Informationen finden Sie im offiziellen Code-Splitting-Leitfaden von React: https://react.docschina.org/docs/code-splitting.html#import

importiere { PhoneNumberUtil } von 'google-libphonenumber'
Funktion usePhoneNumberUtil(){
  // Verwenden von PhoneNumberUtil
}

Ändern Sie die Methode „dynamisch import() , dann werden sowohl „async/await“ als auch „async/await“ unterstützt, um asynchrone Daten abzurufen.

const LibphonenumberModule = () => import('google-libphonenumber')
Funktion usePhoneNumberUtil(){
  LibphonenumberModule().then({PhoneNumberUtil} => {
    // Verwenden von PhoneNumberUtil
  })
}

Wenn Webpack diese Syntax analysiert, führt es automatisch eine Code-Aufteilung durch.

Die veränderte Wirkung:

libphonenumber.js (1.chunk.js) ist vom Anbieter getrennt, und im tatsächlichen Betrieb des Projekts wird die Datei libphonenumber.js nur beim Aufrufen des Prozesses usePhoneNumberUtil vom Server angefordert.

Routenbasierte Codeaufteilung

Reagieren Sie faul.

Siehe den offiziellen Code-Splitting-Leitfaden von React – routenbasiertes Code-Splitting, https://react.docschina.org/docs/code-splitting.html#route-based-code-splitting.

Beispiel vor dem Teilen:

importiere React von „react“;
importiere { Route, Switch } von ‚react-router-dom‘;
const Home = import('./routes/Home');
const Über = import('./routes/Über');

const App = () => (
<Router>
 <Suspense-Fallback={<div>Wird geladen...</div>}>
  <Schalter>
   <Routengenauer Pfad="/" component={Home}/>
   <Routenpfad="/about" component={Über}/>
  </Schalter>
 </Spannung>
</Router>
);

Beispiel nach der Teilung:

importiere React, {lazy} von 'react';
importiere { Route, Switch } von ‚react-router-dom‘;
const Home = lazy(() => import('./routes/Home'));
const Über = lazy(() => import('./routes/Über'));

const App = () => (
// Die Routing-Konfiguration bleibt unverändert)

Wirkung nach der Spaltung:

app.js wird von Webpack automatisch entsprechend der Route in verschiedene Dateien aufgeteilt. Beim Wechseln der Route wird die Zielroutencodedatei abgerufen.

Benannter Export

Dieser Absatz ist ein Zitat aus https://react.docschina.org/docs/code-splitting.html#named-exports.

React.lazy unterstützt derzeit nur Standardexporte. Wenn das importierte Modul benannte Exporte verwenden soll, können Sie ein Zwischenmodul erstellen, das als Standardmodul erneut exportiert. Dadurch wird sichergestellt, dass das Tree Shaking nicht fehlschlägt und dass Sie keine unnötigen Komponenten einbinden.

// VieleKomponenten.js
exportiere const MyComponent = /* ... */;
exportiere const MyUnusedComponent = /* ... */;

// MeineKomponente.js
exportiere { MyComponent als Standard } aus "./ManyComponents.js";

// MeineApp.js
importiere React, {lazy} von 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

AsyncComponent selbst implementieren

Die von React.lazy gewrappte Routing-Komponente für Lazy Loading muss Suspense hinzufügen. Wenn Sie es nicht erzwingen möchten oder die Lazy-Implementierung frei erweitern müssen, können Sie AsyncComponent definieren und implementieren und es auf die gleiche Weise wie Lazy verwenden.

importiere AsyncComponent aus „./components/asyncComponent.js“
const Home = AsyncComponent(() => import('./routes/Home'));
const Über = AsyncComponent(() => import('./routes/Über'));

// asynchrone Ladekomponente
Funktion AsyncComponent(getComponent) {
 Rückgabeklasse AsyncComponent erweitert React.Component {
  statische Komponente = null
  Status = { Komponente: AsyncComponent.Component }

  componentDidMount() {
   wenn (!dieser.Zustand.Komponente) {
    getComponent().then(({ Standard: Komponente }) => {
     AsyncComponent.Component = Komponente
     this.setState({ Komponente })
    })
   }
  }
  // Komponente wird ausgehängt
  componentWillUnmount() {
   // setState-Funktion neu schreiben, nichts zurückgeben
   dies.setState = () => {
    zurückkehren
   }
  }
  rendern() {
   const { Komponente } = dieser.Zustand
   if (Komponente) {
    return <Komponente {...this.props} />
   }
   return null
  }
 }
}

gemeinsames Business-Code-Splitting

Nachdem ich die routenbasierte Codeaufteilung abgeschlossen hatte, sah ich mir die Paketgröße genau an und stellte fest, dass sich die Gesamtpaketgröße von 2,5 M auf 3,5 M erhöht hatte.

Mithilfe des Webpack-Analysetools können wir erkennen, dass der Übeltäter darin liegt, dass jeder einzelne Routing-Code mit einer separaten öffentlichen Datei wie Komponenten, Dienstprogrammen und Gebietsschemas gepackt ist.

Verwenden Sie die Webapck-Konfiguration, um den gemeinsamen Teil separat zu verpacken.

Komponentendateien zusammenführen und exportieren

Das Beispiel exportiert alle Dateien unter Komponenten zusammen. Dasselbe gilt für andere Dateien.

Funktion readFileList(dir, filesList = []) {
 const files = fs.readdirSync(dir)
 files.forEach((item) => {
  let fullPath = Pfad.join(Dir, Element)
  const stat = fs.statSync(vollständiger Pfad)
  wenn (stat.isDirectory()) {
   // Alle Dateien rekursiv lesen readFileList(path.join(dir, item), filesList)
  } anders {
   /\.js$/.test(vollständigerPfad) && filesList.push(vollständigerPfad)
  }
 })
 Dateiliste zurückgeben
}
exports.commonPaths = readFileList(Pfad.join(__dirname, '../src/components'), [])

Aus Common extrahierte Webpack-Konfiguration

importiere conf von '**';
modul.exporte = {
 Eintrag: {
  gemeinsam: conf.commonPaths,
  Index: ['babel-polyfill', `./${conf.index}`],
 },
 ... //Andere Konfigurations-Plugins:[
  neues webpack.optimize.CommonsChunkPlugin('common'),
  ... // andere Plugins
 ]
}

CommonsChunkPlugin wird in webpack3 verwendet, um Bibliotheken von Drittanbietern und allgemeine Module zu extrahieren. Der übergebene Parameter common “ ist der vorhandene Eintragsblock. Anschließend wird der Code des allgemeinen Moduls in diesen Block integriert.

Extrahieren Sie den Code aus gemeinsamen

Nach dem Extrahieren der doppelten Codes jeder Route beträgt die Gesamtgröße des Pakets wieder 2,5 M. Es gibt eine zusätzliche gemeinsame Bundle-Datei. (Common ist zu groß, es kann tatsächlich weiter aufgeteilt werden)

Zusammenfassen

Es gibt noch viele Bereiche, die beim Webpack-Verpacken optimiert werden können. Darüber hinaus gibt es einige Unterschiede zwischen verschiedenen Webpack-Versionen. Die Idee des Entpackens besteht darin, die gemeinsamen Versionen zu extrahieren und sie je nach Verwendungsszenario bei Bedarf zu laden.

Dies ist das Ende dieses Artikels über die Implementierung der Codeaufteilung von Webpack3+React16. Weitere relevante Inhalte zur Codeaufteilung von Webpack3+React16 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!