Heim > Web-Frontend > js-Tutorial > Hauptteil

So extrahieren Sie Bibliotheken von Drittanbietern mit Webpack

亚连
Freigeben: 2018-06-19 09:30:16
Original
1454 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die korrekte Haltung von Webpack zum Extrahieren von Bibliotheken von Drittanbietern vorgestellt. Es gibt zwei häufig verwendete Methoden zum Extrahieren von Bibliotheken von Drittanbietern. In diesem Artikel können Interessierte mehr erfahren >

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 jedes Mal einmal ausgeführt und gepackt werden. Bei der zweiten Methode müssen die komprimierten Dateien des Drittanbieters nur jedes Mal gepackt werden

CommonsChunkPlugin-Methodeneinführung

Nehmen wir Vue als Beispiel

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')
 }
}
Nach dem Login kopieren

Verpacken Sie dann die generierte Datei und fügen Sie sie in die HTML-Datei ein

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>
Nach dem Login kopieren

DLLPlugin-Methode Einführung

Bereiten Sie zunächst zwei Dateien vor

  1. webpack.config.js

  2. webpack. dll.config.js

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

const webpack = require(&#39;webpack&#39;)
const library = &#39;[name]_lib&#39;
const path = require(&#39;path&#39;)

module.exports = {
 entry: {
 vendors: [&#39;vue&#39;, &#39;vuex&#39;]
 },

 output: {
 filename: &#39;[name].dll.js&#39;,
 path: &#39;dist/&#39;,
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, &#39;dist/[name]-manifest.json&#39;),
  // This must match the output.library option above
  name: library
 }),
 ],
}
Nach dem Login kopieren

Dann wird die Datei webpack.config.js wie folgt konfiguriert

const webpack = require(&#39;webpack&#39;)

module.exports = {
 entry: {
 app: &#39;./src/index&#39;
 },
 output: {
 filename: &#39;app.bundle.js&#39;,
 path: &#39;dist/&#39;,
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(&#39;./dist/vendors-manifest.json&#39;)
 })
 ]
}
Nach dem Login kopieren

Dann führen Sie

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js
Nach dem Login kopieren

HTML-Zitiermethode aus

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JavaScript-Moduloptimierung

So verwenden Sie Webpack+Express, um die Entwicklung mehrseitiger Websites zu implementieren

Webpack-Framework (Beherrschung der Kerntechnologie)

So steuern Sie mehrere Bildlaufleisten, um mithilfe von JS synchron zu scrollen

Vue verwenden – So erstellen Sie Vue mit CLI+Webpack

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage