Url-loader和File-loader Webpack的区别

Question

我正在尝试弄清楚url-loader与file-loader之间的区别。什么是DataURl？

url-loader与file-loader类似，但如果文件小于字节限制，则可以返回Data URL。

- stackjlei

Answer 1

url-loader 会将文件编码为 base64 并内联包含它们，而不是将它们作为单独的文件进行加载并发起另一个请求。

base64 编码的文件可能看起来像这样：

data:;base64,aW1wb3J0IFJlYWN0IGZ...

这将被添加到您的捆绑包中。

- jens

---

包含它们内联意味着什么？ - stackjlei

这意味着你的bundle.js将包含一个字符串，该字符串代表通过url-loader处理的资产所需的所有数据。这就是为什么它们允许你设置限制的原因，因为你不想对200kb的图像进行base64编码，因为这将使你的bundle大小增加大约这么多。这对于小文件来说很好，可以减少请求的数量。 - jens

谢谢Jens！为了确保我理解正确，file-loader将您的文件加载到服务器上，然后提供一个URL或引用，使您的客户端可以在运行包时找到它。url-loader也是这样做的，但如果文件足够小，它还可以使文件成为包本身的一部分，对吗？如果我理解正确，那么url-loader会取代file-loader，对吗？因为url-loader不仅提供比file-loader更多的东西，而且还可以内联文件。 - stackjlei

file-loader和url-loader的使用是一种权衡。假设你有很多非常小的文件。每次浏览器请求这个文件时，它都需要进行完整的请求/响应以获取500字节的.svg文件。使用url-loader可以将此文件捆绑到你的.js文件中，作为一个请求必须下载的部分。较大的文件将被“emitted”到一个目录中，您的Web服务器可以静态服务，这就是file-loader的作用。平衡大小与请求数量。两者对于不同的目的都是有用的。 - jens

是的，正确的。在url-loader选项中，您可以确定文件大小阈值。通常大约为8KB。任何大于此大小的文件都将像file-loader一样处理，并生成一个单独的文件。 - jens

Answer 2

只是想要补充一下Jens的答案。

file-loader会将文件复制到构建文件夹并在包含它们的位置插入链接。 url-loader将整个文件字节内容编码为base64，并在包含它们的位置插入base64编码的内容。所以没有单独的文件。

它们主要都用于媒体资产，如图像。大多数情况下是图像。

这种技术可能会加快页面加载速度，因为向服务器下载文件的http请求较少。

同样重要的是，您可以为url-loader指定大小限制。对于超出此大小的所有文件，它将自动退回到file-loader：

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

- Gherman

Answer 3

两个答案都不错，但我想进一步解释数据 URL，请在这里查看 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs，所以它的格式是：

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

例如，如果我转换一个mp3文件，它会像下面这样显示：

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"

- Qiulang