冷たいご飯のシリーズを炒めます--10分url-loaderをやり遂げます

テキストアドレス
url-loaderとはurl-loaderは、導入されたファイルを符号化し、DataURLを生成し、ファイルを一連の文字列に翻訳し、この文字列をJavaScriptにパッケージすることに相当する.
いつ使いますか.
一般的には、画像やフォントファイルを取得するように要求します.画像ファイルが多い場合(例えば、いくつかのicon)、頻繁に要求を何度も送信する必要はありません.この場合、これらの小さなピクチャをローカルに配置し、url-loaderを使用してこれらのピクチャをbase64によってコードに導入することを考慮することができる.これにより、リクエスト回数が節約され、ページのパフォーマンスが向上します.
使用方法
1.取付url-loader

npm install url-loader --save-dev

2.構成webapck

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

3.import(またはrequire)であってもよいファイルを導入する

import logo from '../assets/image/logo.png';
console.log('logo  : ', logo); //        logo    

簡単に3歩で終わりました.
4.奇跡を目撃した時

webpack

webpackが実行されると、distディレクトリは1つのbundle.jsしか生成されません.file-loaderとは異なり、私たちが導入した画像は生成されません.前述したように、url-loaderは、ピクチャをDataURLに変換し、JavaScriptコードにパッケージ化する.
では、bundle.jsに必要なDataURLがあるかどうかを見てみましょう.

// bundle.js
(function(module, exports) {
module.exports = "data:image/jpeg;base64.........."; //      
})

このモジュールが導出したのは標準のDataURLであることがわかります.
標準のDataURL:data:[][;base64],
このDataURLにより、この画像をローカルからロードすることができ、distディレクトリにパッケージする必要はありません.base64を使用して画像をロードするのも両面性があります.

の利点:要求を節約し、ページのパフォーマンスを向上させる

欠点:ローカルファイルサイズを大きくし、ロード性能を低下させる

だから私たちは取捨選択をしなければならなくて、一部の小さいsizeのピクチャーに対してbase64符号化を行って、その他の大きいピクチャーはやはり要求を出しましょう.url-loaderはもちろんすでにこのことをしており、簡単な構成で上記のニーズを実現することができます.
options

limit:ファイルサイズがlimitより大きいときにfallbackのloaderを使用してファイル

を処理するファイルしきい値.

fallback:loaderより大きいファイルを処理するためにlimitを指定します.デフォルトはfile-loader

です.limitを設定してみましょう.

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

webpackを再実行します.logo.pngは1000より大きいので、file-loaderを使用してこのファイルを処理します.画像はdistディレクトリにパッケージされ、返される値はアドレスです.

(function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "dab1fd6b179f2dd87254d6e0f9f8efab.png";
}),

詳細についてはfile-loader
ソース解析file-loaderのコードも多くなく、直接コピーして注釈で説明しました.

import { getOptions } from 'loader-utils'; // loader    
import validateOptions from 'schema-utils'; // schema    
import mime from 'mime';

import normalizeFallback from './utils/normalizeFallback'; // fallback loader
import schema from './options.json'; // options schema

//            
/*
 *@method shouldTransform
 *@param {Number|Boolean|String} limit       
 *@param {Number} size       
 *@return {Boolean}       
*/
function shouldTransform(limit, size) {
  if (typeof limit === 'boolean') {
    return limit;
  }

  if (typeof limit === 'number' || typeof limit === 'string') {
    return size <= parseInt(limit, 10);
  }

  return true;
}

export default function loader(src) {
  //    webpack      options
  const options = getOptions(this) || {};

  //    options
  validateOptions(schema, options, {
    name: 'URL Loader',
    baseDataPath: 'options',
  });

  //        ，      ，      
  // src     Buffer，       src.length     
  if (shouldTransform(options.limit, src.length)) {
    const file = this.resourcePath;
    //     MIME  ，        ，   "image/jpeg"
    const mimetype = options.mimetype || mime.getType(file);

    //    src    Buffer，    Buffer
    if (typeof src === 'string') {
      src = Buffer.from(src);
    }
    
    //    DataURL    
    return `module.exports = ${JSON.stringify(
      `data:${mimetype || ''};base64,${src.toString('base64')}`
    )}`;
  }

  //            url-loader     DataURL，    fallback   loader
  const {
    loader: fallbackLoader,
    options: fallbackOptions,
  } = normalizeFallback(options.fallback, options);

  //    fallback loader
  const fallback = require(fallbackLoader);

  // fallback loader     
  const fallbackLoaderContext = Object.assign({}, this, {
    query: fallbackOptions,
  });

  //    fallback loader     src
  return fallback.call(fallbackLoaderContext, src);
}

//       webpack       UTF8   ，  loader             ，     raw   true
export const raw = true;

リファレンス

url-loader

file-loader

file-loader repo