Url-loader vs File-loader Webpack

Question

I'm trying to figure out the difference between url-loader vs file-loader. What does DataURl mean?

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

Saltern

Answer 1

url-loader will encode files to base64 and include them inline rather than having them loaded as separate files with another request.

A base64 encoded file may look something like this:

data:;base64,aW1wb3J0IFJlYWN0IGZ...

This would be added into your bundle.

Artemisia

what does it mean to include them inline? – Saltern

It means that your bundle.js will have a string that represents all of the data needed to represent the asset you put through url-loader. That is why they let you set a limit, you don't want to base64 encode 200kb images because it will increase your bundle size by around that much. This is good for small files to reduce the number of requests made. – Artemisia

Thanks Jens! To make sure I'm understanding this correctly, file-loader loads up your file onto the server and then provides a url, or reference, inside your bundle so your client can find it when it runs your bundle. Url-loader does the same thing, but it can ALSO make your file become PART of the bundle itself if it's small enough, correct? If I'm right, then url-loader would make file-loader obsolete, right? Since url-loader gives you more everything file-loader gives you and the option to inline files – Saltern

The usage of file-loader vs url-loader is a matter of balance. Let's say you have a lot of very small files. Each time the browser requests this file it requires a full request/response just for the 500 bytes of .svg. With url-loader you can ensure that this file gets bundled into your .js file which has to be downloaded no matter what as one request. Larger files will get emitted to a directory that your web server can serve statically, this is what file-loader does. Balance size vs number of requests. Both are useful for different purposes. – Artemisia

So file-loader in difference while create new file with new requests systematically ? – Rebane

Not sure exactly what you are asking @Webman. file-loader will 'emit' files (named by webpack) and they will be loaded through a normal, separate HTTP request. url-loader will typically just include the file inline in the bundle. – Artemisia

My syntax was very creative, I meant file-loader by contrast will create new file systematically while url-loader will create them only if the size limit is exceeded. I assume that this is the case if I understand your answer, thanks – Rebane

Yes, that is correct. Within the url-loader options you can determine what that file size threshold is. Usually around 8KB. Anything larger than that will be treated like file-loader would with a separate emitted file. – Artemisia

seems like url-loader is the better choice. what is a use-case for the latter one? – Ditter

Answer 2

Just wanted to add to Jens' anwer

file-loader will copy files to the build folder and insert links to them where they are included. url-loader will encode entire file bytes content as base64 and insert base64-encoded content where they are included. So there is no separate file.

They are mostly both used for media assets such as images. Mostly images.

This technique may make page load faster because there are fewer http-requests to the server to download files.

It's also important that you can specify size limit for url-loader. It will automatically fall back to file-loader for all files beyond this size:

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

Scar

Answer 3

Both answers are good but I want to further explain Data URL, check here https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs, so its format is

data:[<mediatype>][;base64],<data>

For example, if I convert a mp3 file, it will look like following,

import audio from '../assets/media/audio.mp3';
console.log('base64 of my audio: ', audio); 

//with url-loader setup
//I will get something like "data:audio/mpeg;base64,xxx"

Interjacent