This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

Following the previous article, this article covers urL-loader.

  • url-loader 和 file-loaderWorks in a similar way, but can convert smaller files intoBase64 URI(This means it can be requested along with the content).
  • The installationurl-loader: 
     npm install url-loader -D
Copy the code
  • useurl-loader: 
    {
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      // loader: 'file-loader',
      loader: 'url-loader'.options: {
        name: 'img/[name].[hash:6].[ext]'.// outputPath: 'img'}}}]Copy the code

    We just need to putarticleIn thewebpackConfigured in the configuration filefile-loadertourl-loaderCan.

After the configuration is complete, delete the folder (build folder) that was packed before, run NPM run build, and check the result in the browser:

As you can see, the images all work. Now look at the contents of the packaged build folder:

What happened to the image file generated by file-loader? The reason is simple: when we use urL-loader to process files, it converts the original file into Base64 data via Base64 encoding, which is then embedded directly into the webPack output file (bundle.js in this case). The browser can parse base64 data, so it will display the image properly.

Here, we need to know the difference between file-loader and url-loader:

  • file-loaderEquivalent to a copy of the picture to the output directory;
  • whileurl-loaderBy default, all image files are converted tobase64Coding;

How should we choose between the two loaders in development?

  • If all images are converted (i.eurl-loaderDefault configuration), which means the last package outjsThe file becomes so large that the page takes longer to loadjsFiles, downloaded after the web can render images and other content, this speed is relatively slow.
  • And if all images are used directly (i.efile-loader), although reduced the final packagejsThe size of the file, which a web page can load quickly, means that part of the page can be quickly displayed (of course, the image is already labeled, but not yet displayed). The downside is that each image needs to be done oncehttpRequest, which means this approach requires morehttpRequest, then put more pressure on the front end and the server.
  • In development, we tend to put larger images in separate image files and send them separatelyhttpRequest to get the picture; And for smaller images, to reducehttpNumber of requests, we usually encode that asbase64The data is then embedded directly into the final packagejsThe file orhtmlIn the. In a nutshell, it isSmall images need to be convertedAnd theLarge images are used directlyCan;
    • This is because small images converted to Base64 can be requested along with pages, reducing unnecessary request processes;
    • And large images are also converted, but will affect the page request speed;

So, we now want to convert the smaller of the first two images to Base64, with the larger one still displayed as an image. So how do you do that? The limit attribute can be a number specifying the maximum file size, in bytes, in options of urL-loader. If the file size is equal to or greater than the limit, file-loader is used (by default). For example, we want images below 100KB to be converted to Base64 and images above 100KB (including 100KB) to be packaged in a separate image format.

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      // loader: 'file-loader',
      loader: 'url-loader'.options: {
        name: 'img/[name].[hash:6].[ext]'.limit: 100 * 1024}}}]Copy the code

After modifying the configuration, run NPM run build again to see the packaging effect:

As you can see, the img folder in the output directory has only one image larger than 100KB, while the other image smaller than 100KB has been packaged into bundle.js. Let’s go back to the browser page and see what it looks like:

This is how urL-loader is used. If we set the limit, url-loader will decide whether to convert the corresponding resource to Base64 based on the limit we set.

Add-on: with url-loader there is no need to use file-loader? Yes, use url-loader directly.