フロントエンド開発 - Vue が画像を動的にインポートするときに require を使用するのはなぜですか?

作者：この歳でどうやって寝れるの？

https://juejin.cn/post/7159921545144434718

vue を使用したことのある友人は、インタビュアーから次のような質問を受けたに違いないと思います。

一部の友人は軽蔑して笑うかもしれません: へー、それだけです。srcの動的追加は静的リソースとして扱われ、コンパイルされていないため、require を追加する必要があり、逆に言えば ...

うーん… 一見、理にかなっているように見えますが、よく見ると、この文は何を言っているのでしょうか。上記の回答に対して、次の質問をせずにはいられません。

1. 静的リソースとは

2. 動的に追加された src が静的リソースとして扱われるのはなぜですか?

3. コンパイルされませんでした。コンパイルされなかったものを意味しますか?

4. リソースはrequireでコンパイルできるのに、requireで正しくインポートできるのはなぜですか?

最後の質問をしたとき、上記の答えは何かを言っているように見えましたが、何も言っていないように見えました... 上記と同じ質問がある場合は、1つずつ教えてください

1. 静的リソースとは

静的リソースに対応する動的リソースもあります.まず、インターネット上の大物がそれをどのように説明しているかを見てみましょう.

静的リソース: 通常、クライアントは Web サーバーに要求を送信し、Web サーバーはメモリから対応するファイルを取得してクライアントに返し、クライアントはそれを解析して表示用にレンダリングします。

動的リソース: 一般クライアントから要求された動的リソースは、まず Web コンテナーに要求が送信され、Web コンテナーがデータベースに接続し、データベースがデータを処理した後、コンテンツが Web サーバーに渡され、 Web サーバーは、分析とレンダリングのためにそれをクライアントに返します。

実際、上記の要約はすでに非常に明確です。vue プロジェクトの観点からは、単純に次のように理解できます。

静的リソースはプロジェクトに直接保存されるリソースであり、これらのリソースを取得するために特別なリクエストを送信する必要はありません。たとえば、画像、ビデオ、オーディオ、フォント ファイル、css スタイル シートなどは、assets ディレクトリの下にあります。

動的リソースは、リクエストを送信して取得する必要があるリソースです。たとえば、タオバオを閲覧すると、動的リソースと呼ばれる特別なリクエストを送信することで、さまざまな製品情報が取得されます。

2. 動的に追加された src が静的リソースとして扱われるのはなぜですか?

この質問に答える前に、ブラウザーが Vue プロジェクトを実行する方法を理解する必要があります。

ブラウザーが Web ページを開くと、実際には html、css、および js の 3 種類のファイルが実行されることがわかっています。ローカルで vue プロジェクトを開始するときは、実際に vue プロジェクトを最初にパッケージ化します. パッケージ化プロセスは、プロジェクト内の各 vue ファイルを html、css、js ファイルに変換してコンパイルし、ブラウザで実行するプロセスです.

動的に追加された src をインポートするために require を使用しなかった場合、最終的にはどのようになるでしょうか? 実験してみましょう。

// vue文件中动态引入一张图片
<template>
  <div class="home">
      <!-- 通过v-bind引入资源的方式就称之为动态添加 -->
    <img :src="'../assets/logo.png'" alt="logo">
  </div>
</template>

//最终编译的结果(浏览器上运行的结果)
//这张图片是无法被正确打开的
<img src="../assets/logo.png" alt="logo">  

動的に追加された src が最終的に静的な文字列アドレスにコンパイルされることがわかります。プログラムが実行されると、このアドレスに従ってプロジェクト ディレクトリにリソースがインポートされます。リソースをプロジェクト ディレクトリにインポートする方法は、リソースを静的リソースとして扱うことです。したがって、これは質問 2 にも答えます。

これを見て戸惑う友人もいるかもしれませんが、最終的にまとめられた住所は問題ないのでしょうか？プロジェクトの画像はこのアドレスですが、インポートできないのはなぜですか? 心配しないで、引き続き下を向いてみましょう。

3. コンパイルされていません。コンパイルされていないというのはどういう意味ですか?

コンパイルは行われません。この半分のセンテンスは、非常に聞き取りにくいものです。質問 2 によると、動的にインポートされた画像が最終的にコンパイルされることはわかっていますが、コンパイル後に画像リソースを正しくインポートすることはできません。ですから、この文は間違っています。私たちの標準的な答えとして、ここに書き直します：

src の動的追加は静的リソースとして扱われ、コンパイルされた静的パスはリソースを正しくインポートできないため、require が追加されます

次に、ここで新たな疑問が生じます:コンパイルされた静的パスがリソースを正しくインポートできないのはなぜですか?

この質問に対する答えを得るには、通常の写真を紹介することから始めなければなりません。プロジェクトでは、画像を静的にインポートすると、間違いなく正常にインポートされ、参照された画像が配置されている Vue ファイルもコンパイルする必要があるため、静的にインポートされた画像は最終的に何にコンパイルされるのでしょうか?波：

// vue文件中静态的引入一张图片
<template>
  <div class="home">
      <!-- 直接引入图片静态地址， 不再使用v-bind -->
    <img src="../assets/logo.png" alt="logo">
  </div>
</template>

//最终编译的结果
//这张图片是可以被正确打开的
<img src="/img/logo.6c137b82.png" alt="logo">

上記のテストによると、静的アドレスを使用して画像をインポートすると、画像のパスと名前が変更され、コンパイルされた静的アドレスがリソースを正常にインポートできることがわかりました。これは、既定では、src ディレクトリの下のすべてのファイルがパッケージ化され、src の下の画像も新しいフォルダーにパッケージ化され、新しいファイル名が生成されるためです。コンパイルされた静的アドレスは、パッケージ化されたイメージ アドレスを導入するため、リソースを正しく参照できます。

これは本当にそうですか？パッケージ化コマンド (npm run build) を実行して確認できます

コンパイルされた静的アドレスは実際に dist の下のコンパイルされたイメージ アドレスと一致していることがわかり、この考えが検証されます。

この時点で、実際に上記の質問を説明できます:動的に追加された src とコンパイルされた静的パスがリソースを正しくインポートできないのはなぜですか?

動的に追加された src のコンパイル済みアドレスがイメージ リソースのコンパイル済みリソース アドレスと一致しないため、リソースを正しくインポートできません

  编译过后的src地址：../assets/logo.png
  编译过后的图片资源地址：/img/logo.6c137b82.png

上記の問題を解決する方法は、次のとおりです。

4. require でリソースを正しくインポートできるのはなぜですか? require でコンパイルできるからですか?

この問題を解決するには、まず文の後半を否定する必要があります.require を追加するかどうかに関係なく、Vue ファイルに導入された画像がコンパイルされます。

次に、require を詳しく見てみましょう。

4.1 何が必要か: モジュール、JSON、またはローカル ファイルを導入するために使用されるノード メソッドです。

4.2 画像を導入するために require メソッドを呼び出した後に何が起こったか:

この質問に答える前に、質問 3 の内容を補足させてください。実際、一部の友人が質問 3 の操作を実際に行って検証した場合、彼らはスプレーされると推定されます。静的にインポートした画像の最終的なコンパイル済みアドレスがあなたのものと異なる理由、それは base64 であり、パッケージング後、 dist new pictures の下には生成されません。おそらく以下の状況です。

// vue文件中静态的引入一张图片
<template>
<div class="home">
    <!-- 直接引入图片静态地址， 不再使用v-bind -->
  <img src="../assets/logo.png" alt="logo">
</div>
</template>

//最终编译的结果
//这张图片是可以被正确打开的
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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" alt="logo">

急いでスプレーしないでください。実際、この違いの理由は、webpack の構成を変更したためです。次に、webpack のコードが少し含まれますが、原則を理解していれば、webpack を知らなくても問題ありません。

上記で、vue プロジェクトは最終的に dist ディレクトリにパッケージ化されると述べたので、このパッケージを完成させるのに役立つのは、そうです、webpack です。Vue プロジェクトで画像を導入するとき、注意深い学生は、ブラウザーに表示される画像のアドレスが base64 である場合もあれば、コンパイルされたファイルのアドレスである場合もあることに気付きます。それが上記の違いです。

この違いの理由は、webpack がパックするときにイメージ リソースを構成するためです。次のコマンドを使用して、検証のために vue プロジェクトに webpack 構成ファイルを生成できます。

npx vue-cli-service inspect --mode 開発 >> webpack.config.development.js

上の図は、vue での webpack のデフォルトのイメージ パッケージ ルールです。セット タイプ: 'asset'。既定では、8k より小さい画像の場合、画像は base64 に変換されて画像に直接挿入され、新しい画像は dist ディレクトリに生成されません。8k を超える画像の場合、それらは dist ディレクトリにパッケージ化され、新しい画像のアドレスが src に返されます。

上記のテストで使用した画像は、vue-cli に付属のロゴ画像で、サイズは 6.69k です。デフォルトのパッケージング ルールに従って、base64 に変換され、画像に埋め込まれます。便宜上、vue.config.js のデフォルト構成を変更しました。構成は次のとおりです。

module.exports = {
    // 使用configureWebpack对象，下面可以直接按照webpack中的写法进行编写
    // 编写的内容，最终会被webpack-merge插件合并到webpack.config.js主配置文件中
  configureWebpack: { 
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
             // 这里我将默认的大小限制改成6k。
              // 当图片小于6k时候，使用base64引入图片；大于6k时，打包到dist目录下再进行引入
              maxSize: 1024 * 6
            }
          }
        }
      ]
    }
  }
}

上記で多くのことを述べてきましたが、require とは何の関係があるのでしょうか。もちろんドロップがあります。

これで、vue は最終的に webpack によってパッケージ化され、一連のパッケージ化ルールが webpack 構成ファイルに書き込まれることがわかりました。webpack のパッケージング ルールは、実際にはモジュール 1 つずつを対象としています。つまり、webpack はモジュールのみをパッケージ化します。では、webpack は画像をモジュールとしてどのように扱うのでしょうか? これにはメインの require が必要です。

require メソッドを使用してイメージを導入すると、webpack はイメージをモジュールとして扱い、構成ファイルのルールに従ってパッケージ化します。require をブリッジとして使用し、 require メソッドによって導入されたリソースを使用すると、リソースはモジュールと見なされ、構成ファイルに従ってパッケージ化され、最終的なパッケージング結果が返されます。

質問 4.2 に戻る: 画像を導入するために require メソッドを呼び出した後に何が起こるか

1. 画像がプロジェクトで設定されたリソース制限サイズよりも小さい場合、画像の base64 が返され、require メソッドの呼び出しに挿入されます。

2. 画像がプロジェクトで設定されたリソース制限サイズよりも大きい場合、新しい画像リソースにコンパイルされます。require メソッドは、新しい画像リソースのパスとファイル名を返します

質問 4 に戻る: なぜ require を追加するとリソースを正しく導入できるのか

requireメソッドで取得したファイルアドレスは、リソースファイル(dist配下に生成されたファイルまたはbase64ファイル)をコンパイルした後のファイルアドレスなので、該当するファイルを見つけてリソースを正常にインポートできます。

答えは簡単で、波を検証することです

// vue文件中使用require动态的引入一张图片
<template>
  <div class="home">
      <!-- 使用require动态引入图片 -->
      <img :src="require('../assets/logo.png')" alt="logo">
  </div>
</template>

//最终编译的结果
//这张图片是可以被正确打开的
<img src="/img/logo.6c137b82.png" alt="logo">

問題ありますか、問題ありません。この時点で、標準的な回答を再度最適化することもできます。

src が動的に追加されるため、コンパイル済みファイルのアドレスとコンパイル済みリソース ファイルのアドレスが一致しないため、リソースを正しくインポートできません。そして、require を使用すると、リソース ファイルがコンパイルされた後のファイル アドレスが返されるため、リソースを正しく導入できます。

これを見て、一部の友人はまだ疑問を持っていると推定されるため、別の波を展開します。

5. 質問 3 で、require を使用せずに画像を静的にインポートすると、コンパイルされたファイル アドレスがまだ返されるのはなぜですか?

回答: webpack が Vue ファイルをコンパイルするとき、src やその他の属性に遭遇すると、デフォルトで require を使用してリソース パスをインポートします。公式vue-cliの原文引用

JavaScript、CSS、または files で *.vue 相対パス (で始まる必要があります) を使用して 静的リソースを参照すると. 、リソースは webpack の依存関係グラフに含まれます。コンパイル中に、、、   CSS <img src="...">などのすべての リソース URL が モジュールの依存関係として解決されます。background: url(...)@import

たとえば、次のurl(./image.png) ように翻訳されます require('./image.png')。

<img src="./image.png">

次のようにコンパイルされます。

h('img', { attrs: { src: require('./image.png') }})

6. 質問 5 によると、src を動的に追加すると、require も使用してインポートされますが、コンパイルされた src のアドレスと、コンパイルされたイメージ リソースのリソース アドレスが一致しないのはなぜですか?

回答: ピクチャが動的にインポートされる場合、src の背後にある属性値は実際には変数であるためです。webpack は、v-bind 命令に従って、src の後の属性値を解析します。リソース パスは reuqire によって導入されません。これが、require を手動で追加する必要がある理由です。

7. public 配下のファイルはコンパイルされないと言われていますが、静的パスを使用してリソースをインポートする場合、require もデフォルトでインポートするのでしょうか?

公式テキストには次のように書かれています。

public フォルダーに配置された静的リソースは、webpack を介さずに単純にコピーされます。 絶対パスで参照する必要があります。

回答: いいえ、require を使用してリソースをインポートする前提は、リソースが webpack によって解析されるモジュールであり、public の下のファイルはまったくコンパイルされず、require が使用されないことです。

8. public の下のリソースに絶対パスを使用しなければならない理由

回答: public ファイルはコンパイルされませんが、src の下のファイルはコンパイルされるためです。インポートされたリソースはパブリック リソースであるため、require は使用されず、コードで定義されたファイル アドレスが直接返されます.このアドレスは、コンパイルされたファイル ディレクトリ (dist ディレクトリ) で対応するファイルを見つけることができず、失敗の原因となります.リソースをインポートします。

9. 上記のドキュメントに記載されている webpack では、リソースをインポートする方法が base64 と dist ディレクトリへのパッケージ化の 2 つあるのに、すべて dist ディレクトリにパッケージ化されているのはなぜですか?

回答: http リクエストを減らすためです。ページ内のパスによって導入された画像は、実際に画像を取得するためにサーバーに要求を送信します。リソースが小さいファイルの場合は、base64 に設定します。これにより、リクエストを減らすことができ、ページの読み込みパフォーマンスには影響しません。

• 参考リンク：cli.vuejs.org/zh/

• 参考リンク：wjhsh.net/vickylinj-p-15599154.html