Gli asset/inline di Webpack

Nell’articolo precedente abbiamo parlato del modulo di risorsa di webpack “asset/resource”, in questo articolo, esploreremo ulteriormente i moduli delle risorse, focalizzandoci sul tipo di modulo “asset/inline”. Questo modulo consente l’inserimento di un file nel bundle sotto forma di dati Uri. Contrariamente ad altri moduli asset, questo specifico tipo non crea nuovi file nella directory di output. Invece, genera una rappresentazione base64 del file desiderato, incorporandola direttamente nel codice JavaScript.

Il modulo asset/inline è particolarmente utile per importare file di risorse di dimensioni ridotte, come ad esempio file SVG. È importante notare che è possibile impiegare questo tipo di risorsa anche per file di dimensioni maggiori, ma ciò comporterà un notevole aumento delle dimensioni del pacchetto JavaScript complessivo. Per comprendere meglio il concetto, procediamo con l’importazione di un’immagine utilizzando il modulo asset/inline.

Quindi in questo articolo prenderemo a riferimento la stessa applicazione utilizzata nell’articolo precedente in cui abbiamo importato un file di immagine .png come asset/resource e andremo semplicemente nel file di configurazione di webpack a modificare il tipo di modulo da “asset/resource” a “asset/inline”, in questo modo:

// 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/inline'
     }
   ]
 }
};

Andiamo al terminale ed eseguiamo il comando per compilare il pacchetto:

npm run build

Noterai immediatamente che la dimensione del pacchetto JavaScript generato è significativamente aumentata, raggiungendo circa 2,5 MB di spazio su disco. Esaminiamo il motivo di questo incremento.

La rappresentazione base64 dell’immagine Kivy che stiamo utilizzando è ora incorporata nel pacchetto JavaScript. Webpack ha preso il contenuto dell’immagine, lo ha convertito in una stringa base64, e l’ha inserito direttamente nel bundle. Questa scelta è responsabile dell’aumento delle dimensioni del pacchetto.

Apriamo la nostra pagina web nel browser per verificare se continua a funzionare come prima. Utilizziamo il devtool di chrome per analizzare l’attributo src del tag img, possiamo notare che contiene la lunga stringa base64 che rappresenta la nostra immagine:

A prima vista, potrebbe sembrare controintuitivo utilizzare il tipo di modulo in linea asset, poiché questo può notevolmente aumentare le dimensioni dei pacchetti generati. Tuttavia, ci sono situazioni specifiche in cui l’utilizzo della risorsa in linea è preferibile rispetto al modulo asset/resource. Quando si adotta quest’ultimo, Webpack genera un file separato per ogni immagine utilizzata, causando richieste HTTP aggiuntive per ogni immagine visualizzata nella pagina. Se hai, ad esempio, 20 piccoli SVG utilizzati come icone, il costo aggiuntivo delle richieste HTTP può superare i benefici. In questo caso, è vantaggioso utilizzare il modulo asset/inline per i file di dimensioni ridotte, consentendo a Webpack di inserirli direttamente nel bundle JavaScript principale.

Questa strategia evita il costo delle numerose richieste HTTP extra associate ai file SVG di piccole dimensioni.