Verwendung der DLL-Funktion von Webpack

Dieser Artikel stellt hauptsächlich die Verwendung der DLL-Funktion von Webpack vor. Ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Ich bin kürzlich auf eine Falle bei der Verwendung von Webpack gestoßen.

Wenn wir Front-End-Projekte erstellen, hoffen wir oft, dass Bibliotheken von Drittanbietern (Anbieter) und unser eigener Code separat gepackt werden können, da Bibliotheken von Drittanbietern oft nicht häufig gepackt und aktualisiert werden müssen. In der Dokumentation von Webpack wird empfohlen, CommonsChunkPlugin zu verwenden, um Bibliotheken von Drittanbietern separat zu packen.

entry: {
 vendor: ["jquery", "other-lib"],
 app: "./entry"
}
new CommonsChunkPlugin({
 name: "vendor",

 // filename: "vendor.js"
 // (Give the chunk a different name)

 minChunks: Infinity,
 // (with more entries, this ensures that no other module
 // goes into the vendor chunk)
})

Um Caching zu bekämpfen, fügen wir normalerweise ein Hash-Suffix zum Dateinamen der verkauften Datei hinzu – aber wir haben den Code des App-Teils bearbeitet Schließlich habe ich es neu verpackt und festgestellt, dass sich auch der Hersteller-Hash geändert hat!

Das bedeutet, dass bei jeder Veröffentlichung einer Version der Herstellercode aktualisiert werden muss, auch wenn ich den Code nicht geändert habe. Dies steht nicht im Einklang mit unserer ursprünglichen Absicht, gesondert zu verpacken.

Bei Fragen habe ich die Diskussionen auf Github durchstöbert und ein Artefakt gefunden: dll.

Dll ist eine kürzlich hinzugefügte Funktion von Webpack. Ich habe im Internet keine chinesische Einführung gefunden, daher werde ich sie hier kurz vorstellen.

Das Konzept der DLL sollte von der DLL des Windows-Systems übernommen werden. Ein DLL-Paket ist eine rein abhängige Bibliothek. Es kann nicht alleine ausgeführt werden und wird als Referenz in Ihrer App verwendet.

Beim Packen einer DLL erstellt Webpack einen Index aller enthaltenen Bibliotheken und schreibt sie in eine Manifestdatei. Beim Packen muss der Code, der auf die DLL verweist (DLL-Benutzer), nur diese Manifestdatei lesen. das ist es.

Dies hat mehrere Vorteile:

1. Dll existiert nach dem Packen unabhängig, solange die darin enthaltenen Bibliotheken nicht vergrößert, verkleinert oder aktualisiert werden ändern, sodass der Online-DLL-Code nicht häufig mit Versionsveröffentlichungen aktualisiert werden muss.

2. Nachdem der App-Teilcode geändert wurde, müssen Sie nur noch den App-Teilcode und den DLL-Teil kompilieren, sofern die enthaltenen Bibliotheken dort nicht vergrößert, verkleinert oder aktualisiert werden Es ist nicht erforderlich, es neu zu verpacken. Dadurch wird auch die Geschwindigkeit jeder Kompilierung erheblich verbessert.

3. Angenommen, Sie haben mehrere Projekte, die dieselben abhängigen Bibliotheken verwenden, dann können sie eine DLL gemeinsam nutzen.

Wie benutzt man es?

Erstellen Sie zunächst eine DLL-Konfigurationsdatei, entry enthält nur Bibliotheken von Drittanbietern:

const webpack = require('webpack');

const vendors = [
 'antd',
 'isomorphic-fetch',
 'react',
 'react-dom',
 'react-redux',
 'react-router',
 'redux',
 'redux-promise-middleware',
 'redux-thunk',
 'superagent',
];

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
  library: '[name]_[chunkhash]',
 },
 entry: {
  vendor: vendors,
 },
 plugins: [
  new webpack.DllPlugin({
   path: 'manifest.json',
   name: '[name]_[chunkhash]',
   context: __dirname,
  }),
 ],
};

webpack.DllPlugin in den Optionen, path ist der Ausgabepfad der Manifestdatei; name ist der von der DLL bereitgestellte Objektname, der mit output.library übereinstimmen muss; context ist der Kontext zum Parsen des Paketpfads, der mit dem übereinstimmen muss DLL-Benutzer als nächstes konfiguriert.

Beim Ausführen von Webpack werden zwei Dateien ausgegeben, eine ist die gepackte Datei „vendor.js“ und die andere ist „manifest.json“, die wie folgt aussieht:

{
 "name": "vendor_ac51ba426d4f259b8b18",
 "content": {
  "./node_modules/antd/dist/antd.js": 1,
  "./node_modules/react/react.js": 2,
  "./node_modules/react/lib/React.js": 3,
  "./node_modules/react/node_modules/object-assign/index.js": 4,
  "./node_modules/react/lib/ReactChildren.js": 5,
  "./node_modules/react/lib/PooledClass.js": 6,
  "./node_modules/react/lib/reactProdInvariant.js": 7,
  "./node_modules/fbjs/lib/invariant.js": 8,
  "./node_modules/react/lib/ReactElement.js": 9,
  
  ............

Webpack indiziert jede Bibliothek nach Nummer, und nachfolgende DLL-Benutzer können diese Datei lesen und direkt anhand der ID darauf verweisen.

DLL-Benutzerkonfiguration: Unter den Optionen von

const webpack = require('webpack');

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
 },
 entry: {
  app: './src/index.js',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./manifest.json'),
  }),
 ],
};

DllReferencePlugin muss context mit vorher übereinstimmen Anleitung: Webpack passt den Pfad zur Bibliothek im Manifest an. manifest wird zum Importieren der gerade ausgegebenen Manifestdatei verwendet.

Nach dem Ausführen von Webpack sind die Ergebnisse wie folgt:

Vergleichen Sie die Ergebnisse der Verpackung ohne Trennung:

Die Geschwindigkeit ist schneller und die Dateigröße ist kleiner.

Während der normalen Entwicklung wird die Geschwindigkeit der Neukompilierung nach der Änderung des Codes erheblich reduziert, was Zeit spart.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

SpringBoot und Vue.js realisieren die Datei-Upload-Funktion der Front-End- und Back-End-Trennung

Anleitung zum Installieren des Angular6.0-Frameworks

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