Detaillierte Erklärung der richtigen Methode zur Extraktion von Drittanbieter-Bibliotheken in webpack

Wenn wir mit webpack packen, möchten wir oft Drittanbieter单独 extrahieren, um sie als stabile Versionsdateien zu verwenden, um die Anzahl der Anfragen durch den Browsercache zu reduzieren. Es gibt zwei gängige Methoden zum Extrahieren von Drittanbieterbibliotheken

1. CommonsChunkPlugin
2. DLLPlugin

Unterschied: Der erste Typ packt die Drittanbieter每次打包， nur das Projektdatei wird jedes Mal gepackt, und wir können nur den ersten gepackten komprimierten Drittanbieter referenzieren

Kurzbeschreibung der Methode CommonsChunkPlugin

Nehmen wir Vue als Beispiel

const vue = require('vue')
{
 entry: {
 // bundle ist der Exportname der Datei, die wir packen möchten, app ist die Eingabedatei des JS
 bundle: 'app',
 // Drittanbieter ist der Name der endgültigen Datei, die wir packen möchten, und in dem Array sind die Drittanbieter zu packen, die nicht im "node_modules"-Verzeichnis sind, können Sie die genaue Adresse der Bibliothek angeben
 Drittanbieter: ['vue']
 },
 output: {
  path: __dirname + "/bulid/','
 // Dateiname
 filename: '[name].js'
 },
 plugins: {
 // Hier wird der Konstruktor der Funktion webpack.optimize.CommonsChunkPlugin instanziert
 // Nach dem Packen wird die Datei vendor.js erstellt
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Dann werden die generierten Dateien in die HTML-Datei eingebunden

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

Kurzbeschreibung der Methode DLLPlugin

Zunächst zwei Dateien vorbereiten

1. webpack.config.js
2. webpack.dll.config.js

Die Datei webpack.dll.config.js ist so konfiguriert:

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 Drittanbieter: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/','
 
 },
 plugins: [
 
  Pfad: path.join(__dirname, 'dist', "第2段": "new webpack.DllPlugin({",/[name]-manifest.json'),
  // Dies muss mit der Option output.library oben übereinstimmen
  name: library
 }),
 ],
}

Dann ist die Konfiguration der Datei webpack.config.js wie folgt

const webpack = require('webpack')
module.exports = {
 entry: {
 app: '.',/src/index
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/','
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 }
 ]
}

Dann führen Sie aus

$ webpack --Konfiguration webpack.dll.config.js
$ webpack --Konfiguration webpack.config.js

HTML-Referenzweise

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und dass Sie die呐喊教程 unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit urheberrechtlichen Bedenken finden, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Wenn Sie eine Meldung senden, ersetzen Sie bitte # durch @ und geben Sie entsprechende Beweise an. Bei nachgewiesener Rechtsverletzung wird der fragliche Inhalt sofort gelöscht.)