web-dev-qa-db-fra.com

Webl-loader vs File-loader Webpack

J'essaie de comprendre la différence entre le chargeur d'url et le chargeur de fichiers. Que signifie DataURl?

Le chargeur d'url fonctionne comme le chargeur de fichiers, mais peut renvoyer une DataURL si le fichier est plus petit qu'une limite d'octets.

37
stackjlei

url-loader codera les fichiers en base64 et les inclura en ligne plutôt que de les charger en tant que fichiers séparés avec une autre requête.

Un fichier encodé en base64 peut ressembler à ceci:

data:;base64,aW1wb3J0IFJlYWN0IGZ...

Cela serait ajouté à votre bundle.

47
jens

Je voulais juste ajouter à la réponse de Jens

file-loader va copier fichiers dans le dossier de construction et insérer des liens vers ceux-ci où ils sont inclus. url-loader codera le contenu entier des octets de fichier en base64 et insérera le contenu codé en base64 là où il est inclus. Il n'y a donc pas de fichier séparé.

Ils sont principalement utilisés tous les deux pour des éléments multimédias tels que des images. Surtout des images.

Cette technique peut accélérer le chargement des pages car il y a moins de requêtes http au serveur pour télécharger des fichiers.

Il est également important que vous puissiez spécifier une limite de taille pour url-loader. Il retombera automatiquement sur file-loader pour tous les fichiers au-delà de cette taille:

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192 // in bytes
        }
    }]
}
18
Gherman