Optimierung der Webpack-Leistung

Es gibt viele Möglichkeiten, die Leistung von Webpacks zu optimieren. Der Grund, warum DLL in diesem Artikel separat erläutert wird, liegt darin, dass DLL die einfachste, gröbste und äußerst effektive Optimierungsmethode ist. In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Webpack-Leistungsoptimierungs-DLL vorgestellt. Der Herausgeber findet sie recht gut. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Im normalen Verpackungsprozess werden viele Bibliotheken, auf die Sie verweisen, wie z. B. jquery, Bootstrap, React, React-Router, Redux, Antd, Vue, Vue-Router, Vuex usw., ebenfalls in das Bundle gepackt in der Datei. Da sich der Inhalt dieser Bibliotheken grundsätzlich nie ändert, ist das Hinzufügen zu jedem Paket zweifellos eine enorme Leistungsverschwendung.

Dll-Technologie besteht darin, alle importierten Bibliotheken zum ersten Mal in eine dll.js-Datei zu packen und den von Ihnen geschriebenen Inhalt in eine bundle.js-Datei zu packen, sodass beim nachfolgenden Packen nur der Bundle-Teil verarbeitet werden muss . .

Nehmen Sie als Beispiel ein Vue-Projekt. Erstellen Sie zunächst eine Datei mit dem Namen webpack.dll.config.js

var path = require("path"),
　　fs = require('fs'),
　　webpack = require("webpack");

var vendors = [
　　'vue', 
　　'vue-router', 
　　'vuex'
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

Die Funktion dieser Datei ist Führen Sie vue, vue-router und vuex zusammen und packen Sie sie in ein statisches Ressourcenpaket namens Dll.js und generieren Sie eine manifest.json-Datei, um den Verweis auf die Module in Dll.js zu erleichtern.

Es ist zu beachten, dass beim Ausführen des Befehls webpack standardmäßig die Datei mit dem Namen webpack.config.js oder webpackfile.js im Verzeichnis ausgeführt wird. Daher müssen Sie die Datei manuell über den Befehl --config angeben und schließlich den Befehl -p hinzufügen, um Dll.js zu komprimieren.

$ webpack --config webpack.dll.config.js -p

Auf diese Weise wird ein zusätzlicher dist-Ordner zum Projektstammverzeichnis hinzugefügt, der die komprimierten Dateien Dll.js und manifest.json enthält.

Der Inhalt der Datei manifest.json lautet wie folgt. Geben Sie jedem Modul eine ID als Referenz.

{
 "name": "vendor_2beb750db72b1cda4321",
 "content": {
  "./node_modules/process/browser.js": {
   "id": 0,
   "meta": {}
  },
  "./node_modules/vue-router/dist/vue-router.esm.js": {
   "id": 1,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
  "./node_modules/vue/dist/vue.runtime.esm.js": {
   "id": 2,
   "meta": {
    "harmonyModule": true
   },
   "exports": [
    "default"
   ]
  },
//.......

Fügen Sie schließlich die Referenz in webpack.config.js hinzu. Fügen Sie das DllReferencePlugin-Plugin im Plugins-Attribut hinzu und geben Sie den Referenzpfad zur Datei manifest.json an.

//...
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./dist/manifest.json')
  })
]

Nachdem Sie die erfolgreiche Ausführung der Datei webpack.dll.config.js sichergestellt haben, führen Sie webpack -p aus, um das Projekt zu packen.

Sie können sehen, dass die in der DLL-Datei gepackten Dateien delegiert (delegiert) werden, anstatt direkt in die Bundle-Datei eingegeben zu werden.

Auf diese Weise packen wir alle Ressourcen und das generierte dist-Verzeichnis lautet wie folgt:

Der dist-Ordner reicht jedoch nicht aus Für eine HTML-Datei habe ich eine Datei mit dem Namen pack.js erstellt und das Dateisystem von nodejs verwendet, um die HTML-Datei zu ändern und zu kopieren.

pack.js

var fs = require('fs');

fs.readFile('./index.html', 'utf8', (err, data) => {
  if (!err) {
    var dataStr = data.toString(),
    timestamp = (new Date()).getTime();
  
    dataStr = dataStr
          .replace('bundle.js', 'bundle.js?v='+timestamp)
          .replace(&#39;<!-- dll -->&#39;, &#39;<script src="./dist/Dll.js?v=&#39;+ timestamp +&#39;"></script>&#39;);

    fs.writeFile(&#39;./dist/index.html&#39;, dataStr, (error) => {
      if (!error) {
        console.log(&#39;HTML file copy successfully&#39;);
      } else {
        console.log(error);
      }
    });
  } else {
    console.log(err);
  }
});

Wir müssen das Platzhalterzeichen von b77a9b994ab1dbd000a29af0dd12365f in den HTML-Eintrag des Moduls einfügen Die Funktion von pack.js besteht darin, die HTML-Datei in das dist-Verzeichnis zu kopieren, 889df5ee7b69ba4b3cb9dbbe6c2c2701 durch das Skript-Tag zu ersetzen, das auf Dll.js verweist, und nach dem Verweis auf die Datei einen Zeitstempel hinzuzufügen.

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

Geben Sie nach der Ausführung von webpack -p package den folgenden Befehl ein, um pack.js auszuführen. Im Verzeichnis dist wird dann eine HTML-Datei generiert.

$ node pack.js

Der Inhalt ist wie folgt:

<!-- .... -->
<body>
<p id="demo" class="container"></p>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>

This dist Der Ordner fungiert als vollständiges, komprimiertes und verschleiertes Projekt, das keine manuellen Vorgänge erfordert und direkt online bereitgestellt werden kann.

Die tatsächliche Referenzadresse der Projektvorlage lautet wie folgt. Da der Autor ein Dual-Entwickler von React und Vue ist, habe ich über yomen(yo) und dergleichen zwei Vorlagen für spätere Gerüstwerkzeuge erstellt.

Verwandte Empfehlungen:

Verwenden Sie Mockjs, um Back-End-Daten in Vue, Vuecli und Webpack zu simulieren

Loader-Analyse von webpack3

Detaillierte Erläuterung der Webpack-Konfiguration und des Backend-Renderings

Das obige ist der detaillierte Inhalt vonOptimierung der Webpack-Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!