Spiegazione dettagliata della corretta postura per estrarre librerie di terze parti in webpack

Quando utilizziamo webpack per l' impacchettamento, spesso vogliamo estrarre liberie di parte terza singolarmente, trasformandole in file di versione stabile, per sfruttare la cache del browser e ridurre il numero di richieste.

1. CommonsChunkPlugin
2. DLLPlugin

Differenza: il primo metodo pacchetta anche le librerie di terze parti ogni volta che si impacchetta, mentre il secondo metodo pacchetta solo i file del progetto, possiamo solo referenziare il file compresso di terze parti pacchettizzato per la prima volta

Sintesi del metodo CommonsChunkPlugin

Prendiamo vue come esempio

const vue = require('vue')
{
 entry: {
 // Bundle è il nome del file di output del progetto che stiamo pacchettizzando, app è il file js di ingresso
 bundle: 'app',
 // Vendor è il nome del file finale che genereremo dal pacchetto delle librerie di terze parti, nell'array specificare quali librerie pacchettare, se non sono nel percorso node_modules, si può specificare l'indirizzo esatto della libreria
 vendor: ['vue']
 },
 output: {
  path: __dirname + '/bulid/',
 // Il nome del file
 filename: '[name].js'
 },
 plugins: {
 // Ecco un esempio di istanziazione del costruttore webpack.optimize.CommonsChunkPlugin
 // Dopo il packaging viene generato il file vendor.js
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

Poi, pacchettizzare i file generati e inserirli nel file html

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

Sintesi del metodo DLLPlugin

Prima di tutto, preparare due file

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

La configurazione del file webpack.dll.config.js è la seguente

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'),
  // Questo deve corrispondere all'opzione output.library sopra
  name: library
 }),
 ],
}

Ecco la configurazione del file webpack.config.js

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

Poi esegui

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

Modo di citazione HTML

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

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urlaio.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è di proprietà dei rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato sottoposto a elaborazione manuale e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito cancellerà immediatamente il contenuto sospetto di violazione del copyright.