So extrahieren Sie Bibliotheken von Drittanbietern mit Webpack

Dieses Mal zeige ich Ihnen, wie Webpack Bibliotheken von Drittanbietern extrahiert. Was sind die Vorsichtsmaßnahmen für Webpack, um Bibliotheken von Drittanbietern zu extrahieren?

Wenn wir Webpack zum Packen verwenden, möchten wir häufig die Bibliothek eines Drittanbieters separat extrahieren, sie als stabile Versionsdatei verwenden und den Browser-Cache verwenden, um die Anzahl der Anforderungen zu reduzieren. Es gibt zwei häufig verwendete Methoden zum Extrahieren von Bibliotheken von Drittanbietern

1. CommonsChunkPlugin

2. DLLPlugin

Unterschied: Bei der ersten Methode muss die Drittanbieterbibliothek bei jedem Packen einmal gepackt werden. Bei der zweiten Methode müssen die Projektdateien nur jedes Mal

verwiesen werden Beim ersten Mal einfach ablegen

CommonsChunkPlugin-MethodeEinführung

Nehmen wir als Beispiel Vue

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app'，
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Packen Sie dann die generierte Datei und importieren Sie sie in die HTML-Datei

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

Einführung in die DLLPlugin-Methode

Bereiten Sie zunächst zwei Dateien vor

1. webpack.config.js

webpack.dll.config.js

Die Datei webpack.dll.config.js ist wie folgt konfiguriert

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },
 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

Anschließend wird die Datei webpack.config.js wie folgt konfiguriert

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')
 })
 ]
}

Führen Sie dann

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

aus HTML-Zitiermethode

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So entwickeln Sie das optimale JS-Modul

Schritte zur Implementierung einer mehrseitigen Webpack+Express-Site Entwicklung

Das obige ist der detaillierte Inhalt vonSo extrahieren Sie Bibliotheken von Drittanbietern mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!