Warum Bibliotheken von Drittanbietern trennen?

Webpack ist ein nerviger kleiner Kobold. Ich war schon immer im Überfluss-Lager und habe Browserify zum Packen verwendet. Ich hatte Angst, von der Community zurückgelassen zu werden, also habe ich es schnell aufgegriffen und damit gespielt. Ursprünglich wollte ich nur spielen. Nachdem ich versucht habe zu packen, möchte ich einen Webpack-Server starten und dann Hot-Replacement hinzufügen, CSS-Dateien trennen, verschiedene Loader verwenden, um die Verpackungsergebnisse zu verarbeiten und zu optimieren. Welche Unterschiede gibt es zwischen verschiedenen Quellkarten? fehlen. Beim Hinzufügen von Hot Replacement gab es einige Wendungen, da der Anwendungsserver und der Webpack-Server nicht denselben verwendeten. Dann kommen wir zum heutigen Thema.
Schritt für Schritt zum heutigen Thema erweitern:
Warum sollten wir Drittanbieter-Bibliotheken trennen?
Dieser Vorteil liegt auf der Hand. Die Drittanbieter-Bibliothek ist relativ stabil und ändert sich nicht so leicht. Nach der Verwendung des Browser-Cache reduziert der Benutzer die Serveranfragen beim erneuten Laden der Seite, was die Geschwindigkeit verbessert und das Erlebnis optimiert. Die Funktion zum Extrahieren gemeinsamer Module mehrerer Anwendungen (Eingänge) ist ähnlich. Die gemeinsamen Teile werden zwischengespeichert, und alle Anwendungen können zwischengespeicherte Inhalte verwenden, um die Leistung zu verbessern.
Kann ich mit dem Browser den Cache ändern, indem ich die Drittanbieter-Bibliothek trenne?
Es gibt natürlich auch viele Faktoren, die dazu führen, dass der Cache nicht verwendet werden kann. Der offensichtlichste ist beispielsweise, dass die getrennte Bibliotheksdatei jedes Mal einen anderen Namen erhält . Dies ist einfacher zu finden. Kollegen im Hintergrund setzen die Cache-Ablaufzeit für die js-Datei auf 0. Das ist peinlich, aber wenn sie 0 ist, kann der Cache nicht verwendet werden? Nein, solange die Datei vollständig unverändert ist, beachten Sie, dass sie einschließlich der Änderungszeit vollständig unverändert ist, der Cache weiterhin verwendet wird und die Leistung sprunghaft ansteigt. Wenn Sie Caching verwenden möchten, müssen Sie zunächst Caching verstehen. Hier eine kurze Erwähnung:
Was ist der Browser-Caching-Mechanismus?
Die von HTTP1.1 vorgegebene Strategie besteht darin, Cache-Control mit Etag zu verwenden
Cache-Control-Einstellungsbeispiel:
'Cache-Control': 'public, max-age=600',
max-age ist die Ablaufzeit, es wird auch der Etag überprüft:
In Apache ist der Wert von ETag standardmäßig der Indexknoten (INode). Größe (Size) und Die letzte Änderungszeit (MTime) werden nach dem Hashing erhalten.
Wenn der Etag derselbe ist, werden weiterhin keine neuen Ressourcen angefordert, sondern die vorherige Datei wird verwendet.

Wofür genau wird CommonsChunkPlugin verwendet? Im wahrsten Sinne des Wortes bedeutet das Extrahieren des öffentlichen Pakets, dass die Bibliothek einer Einzelseitenanwendung (einzelner Eintrag) nur von ihm selbst verwendet wird als öffentliches Paket betrachtet, oder? Das von diesem Plug-In extrahierte öffentliche Paket wird jedes Mal neu gepackt (Etag wird anders sein), sei es, um beim Packen Zeit zu sparen (obwohl es trivial ist, aber schließlich nutzlos ist: Die Bibliothek hat sich überhaupt nicht geändert) oder den Browser-Cache nutzen (Würden Sie auf das Caching verzichten, wenn das maximale Alter abläuft?) Beides ist keine gute Lösung. Es stellte sich die beste Lösung heraus:
DllPlugin
Was sind die Vorteile von DllPlugin? Verpacken Sie die Bibliotheksdatei nur einmal. Mit anderen Worten: Solange die Bibliotheksdatei unverändert bleibt, muss sie nur einmal gepackt werden. Es spielt keine Rolle, ob Sie den Geschäftscode und die Bibliotheksdatei später packen. Auf diese Weise ist die Bibliotheksdatei immer dieselbe Solange die Bibliotheksdatei unverändert bleibt, bleibt der Cache immer gültig (Etag bleibt unverändert). Packen Sie Ihre Tasche ein und vergessen Sie die Bibliothek und fühlen Sie sich erfrischt. Lassen Sie mich die einfachste Art der Verwendung vorstellen:
Schreiben Sie zunächst eine weitere Webpack-Konfigurationsdatei. Schließlich handelt es sich um eine separate Paketbibliothek
webpack.config.dll.js

const path = require('path')const webpack = require('webpack');module.exports = {
  entry: {vendor: ['react', 'react-dom', 'react-hot-loader', 'immutable', 'redux', 'react-redux', 'react-router-dom', 'redux-logger',  'redux-persist', 'redux-persist-transform-immutable', 'redux-thunk'],
  },
  output: {filename: 'js/[name].js',path: path.resolve(__dirname, 'public'),library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
  },
  plugins: [new webpack.DllPlugin({  path: path.resolve(__dirname, 'public/manifest.json'), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用  name: '[name]',}),
  ],}

Fügen Sie das Plug-in

DllReferencePlugin zur ursprünglichen Konfigurationsdatei hinzu

new webpack.DllReferencePlugin({  manifest: require('./public/manifest.json'), // 指定manifest.json  name: 'vendor',  // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致}),

Führen Sie zuerst das Terminal aus:

webpack -p --progress --config ./webpack.config.dll.jsStellen Sie die Bibliothek ein. Die Datei wird zuerst gepackt. Solange die Bibliothek unverändert bleibt, wird dieses Paket in Zukunft verwendet. Anschließend wird der Geschäftscode gepackt und die Arbeit abgeschlossen.

Empfohlene Strategie: Jeder macht sein eigenes Ding.
Wenn es sich um eine einseitige Anwendung handelt, verwenden Sie einfach DllPlugin, um die Bibliotheksdatei zu packen, und der Geschäftscode kann in einem Paket gepackt werden.
Wenn es sich um eine mehrseitige Anwendung handelt, werden nach dem Packen der Bibliotheksdateien durch DllPlugin möglicherweise viele öffentliche Geschäftscodes während der Entwicklung verwendet und können sich jederzeit ändern. In diesem Fall muss CommonsChunkPlugin verwendet werden, um das zu tun, was es ist Soll dies tun und dann den öffentlichen Geschäftscode extrahieren. Was das Caching betrifft, werden zumindest die öffentlichen Teile beim Wechseln zwischen Seiten weiterhin zwischengespeichert.

Das obige ist der detaillierte Inhalt vonWarum Bibliotheken von Drittanbietern trennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!