I generic asset di Webpack

Negli articoli precedenti, hai acquisito familiarità con i tipi di moduli asset/resource e asset/inline. Il modulo asset/resource genera un nuovo file nella directory di output per ogni risorsa, esportando l’URL del file. D’altro canto, il modulo asset/inline crea una rappresentazione base64 della risorsa, incorporando direttamente la stringa base64 nel pacchetto JavaScript principale.

Di solito, si dovrebbe optare per il primo tipo quando si importano file di grandi dimensioni e per il secondo quando si tratta di file più piccoli. Naturalmente, la scelta dipende dalle circostanze specifiche, ma questa è generalmente la pratica consigliata. In questo articolo, esploreremo un altro tipo di modulo asset che essenzialmente combina i due approcci precedenti. Sto parlando del tipo di risorsa generale.

Come nei precedenti articoli, ci riferiremo alla stessa applicazione su cui applichiamo le diverse tecniche. Ancora una volta, modificheremo il file di configurazione di Webpack, cambiando il tipo di modulo da “resource/inline” a “resource”. Quando si utilizza questo tipo di risorsa generale, Webpack effettuerà automaticamente la scelta tra asset/resource e asset/inline, basandosi sulle dimensioni di ciascun file.

// webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
   publicPath: 'dist/'
 },
 mode: 'none',
 module: {
   rules: [
     {
       test: /\.(png|jpg)$/,
       type: 'asset'
     }
   ]
 }
};

Se la dimensione del file è inferiore a otto kilobyte, il file verrà trattato come risorsa in linea; se la dimensione è superiore a otto kilobyte, verrà trattato come risorsa esterna. Naturalmente, è possibile personalizzare questo valore di soglia da otto kilobyte a qualsiasi altro. Passiamo al terminale ed eseguiamo il comando per compilare con webpack:

npm run build

Dato che la dimensione della nostra immagine è piuttosto grande, Webpack la gestisce come risorsa esterna. Di conseguenza, Webpack genera un file separato per l’immagine nella directory “dist”, e noterai immediatamente una riduzione significativa delle dimensioni del nostro bundle JavaScript principale. Apriamo il browser e verifichiamo cosa c’è. Puoi vedere la stessa immagine sulla pagina come prima. Aprimao il devtool per vedere l’attributo src del tag img, possiamo notare che contiene un URL al file immagine generato all’interno della cartella “dist” e non la codifica base64.

Adesso vediamo come è possibile cambiare questo valore di soglia di otto kilobyte menzionato in precedenza e proviamo a modificarlo da 8kB a 2 kB. Per effettuare questa modifica, andiamo sempre nel file webpack.config.js e andiamo a specificare un’opzione aggiuntiva per la nostra regola “asset”. 
Il nome di questa opzione è “parser” questa accetta un oggetto JavaScript come valore, di questo oggetto andiamo a una specificare la proprietà: “dataUrlCondition“. Questa è la condizione in base alla quale webpack decide se utilizzare la risorsa in linea o la risorsa esterna.

// webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
   filename: 'bundle.js',
   path: path.resolve(__dirname, 'dist'),
   publicPath: 'dist/'
 },
 mode: 'none',
 module: {
   rules: [
     {
       test: /\.(png|jpg)$/,
       type: 'asset',
       parser: {
         dataUrlCondition: {
           maxSize: 2 * 1024 // 2 kylobytes
         }
       }
     }
   ]
 }
};

Grazie a questo settaggio possiamo specificare la dimensione massima che webpack utilizzerà per decidere se trattare un file con “asset/resource” oppure “asset/inline”. Impostando 2 kilobyte come valore, se il file di risorsa è inferiore a 2 kilobyte, webpack tratterà quel file come una risorsa in linea, se il file è più grande di 2 kilobyte, webpack lo tratterà come una risorsa esterna.