web-dev-qa-db-ja.com

Vueの組み込みメカニズムを使用して画像をプリフェッチする方法

Vue CLIを備えたアプリがあります。アプリが読み込まれると、ユーザーがボタンをクリックしたときにトランジションとともに表示される画像がたくさんあります。問題は、ユーザーがボタンをクリックすると、対応する画像が読み込まれ始めます。つまり、ほとんどのアニメーションはそれまでに行われます。これにより、トランジション中に画像が突然表示され、他の要素が置き換えられるため、エクスペリエンスが非常に不安定になります。サイトでプリフェッチしたい負荷。

この回答 はImageクラスの使用を提案しています。ただし、 Vue CLI docs によると、Vueは内部的に独自のプラグインを使用します preload-webpack-plugin 、そして明らかに 設定可能 。

画像をプリロードするように設定しようとしました：

_vue.config.js_

_const HtmlWebpackPlugin = require('html-webpack-plugin');
const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin(),
      new PreloadWebpackPlugin({
        rel: 'prefetch',
        as (entry) {
          if (/\.css$/.test(entry)) return 'style';
          if (/\.woff$/.test(entry)) return 'font';
          if (/\.png$/.test(entry)) return 'image';
          return 'script';
        }
      })
    ]
  }
}
_

これは、最終的に_index.html_を台無しにして、ビルドスクリプトとスタイルを内部に残さないようにします。

この行を削除すると：

_      new HtmlWebpackPlugin(),
_

サイトは引き続き読み込まれますが、画像はプリフェッチされません。これは、_vue.config.js_ファイルで何も実行しなかった場合と同じです。

正しく設定するにはどうすればよいですか？

編集：Vueコンポーネントでは、require()を使用して画像をロードします。つまり、 Webpackを使用した例：

_<img :src="require('../assets/img/' + img)" draggable="false">
_

編集：Roy Jがコメントで提案したように、画像をプリフェッチすることができました：

メインコンポーネントの_PreloadImages.vue_：

_<template>
  <div style="display: none;">
    <img :src="require('../assets/img/foo.png')">
    <img :src="require('../assets/img/bar.png')">
    <img :src="require('../assets/img/baz.png')">
  </div>
</template>
_

しかし、それは私の実際の質問への答えではありません-_<link>_タグを介したリソースヒントは使用しません。また、それはより多くの努力を必要とし、私はそれが悪い習慣だと信じています。

javascriptvue.jsvuejs2vue-cli
14
dodov

プラグインはすでにVueJSに含まれているため、 chainWebpack で変更する必要があると思います。

プリロードWebpackプラグイン documentation に従って、includeオプションも 'に設定する必要がありますallAssets '値。

Webpackでは、ファイルローダーなどのローダーを使用して、フォントや画像などの特定の種類のアセットを生成するのが一般的です。これらのファイルもプリロードしたい場合は、includeallAssetsを使用できます

したがって、構成は次のようになります。

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('preload').tap(options => {
            options[0].as = (entry) => {
                if (/\.css$/.test(entry)) return 'style';
                if (/\.woff$/.test(entry)) return 'font';
                if (/\.png$/.test(entry)) return 'image';
                return 'script';
              }
            options[0].include = 'allAssets'
            // options[0].fileWhitelist: [/\.files/, /\.to/, /\.include/]
            // options[0].fileBlacklist: [/\.files/, /\.to/, /\.exclude/]
            return options
        })
    }
}

Vue-cliを新しくインストールすると、次のHTMLが生成されます

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=Edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico> <title>vue-preload-images</title>
    <link href=/css/app.0b9b292a.css rel=preload as=style>
    <!-- Here is the logo image -->
    <link href=/img/logo.82b9c7a5.png rel=preload as=image>
    <link href=/js/app.30d3ed79.js rel=preload as=script>
    <link href=/js/chunk-vendors.3d4cd4b5.js rel=preload as=script>
    <link href=/css/app.0b9b292a.css rel=stylesheet>
</head>

<body><noscript><strong>We're sorry but vue-preload-images doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=/js/chunk-vendors.3d4cd4b5.js> </script> <script src=/js/app.30d3ed79.js> </script> </body> </html>

うまくいくと思います。

2
lbineau

ソリューション1。

ユーザーがボタンをクリックすると、画像が非表示の状態でレンダリングされます。

画像のloadイベントでは、スムーズに移行を実行します。

画像の読み込みに通常2秒以上かかる場合は、ユーザーにボタンクリックの視覚的な手掛かりを与えることを検討してくださいwas記録その他のものisもうすぐ起こります。

これは技術的に正しい解決策です。

ソリューション2。

本番環境で広く使用されている代替手段（およびVue per-se）とは何の関係もない）は、ページの画像のサムネイルをロードすることです（10分の1のように-これは領域であるため、サイズが約100倍小さくなります。明らかではないかもしれませんが、移行が進行している間は、大きなものに非常によく置き換えられます。CSSblurフィルターを試してみることもできます。

サムネイルと大きな画像は、遷移する同じ親内で、大きなものを下にして完全にオーバーラップする必要があります。ラージバージョンのloadイベントで、サムネイルをフェードアウトして、フォーカスイン効果を発生させます。
この方法のかなり面白い特典は、親指を上にしておくと（opacity: 0）、誰かが画像をダウンロードしようとするたびに、親指を右クリックし、なぜ低解像度でダウンロードしているのか理解できなくなります。

実際に読み込まれると、画像にフォーカスイン効果が追加されますが、すべては（アニメーションに関して）ほとんど同じです。

DRYではありませんが、効率的です。プロのように見えますが、すべてが瞬時にスムーズに読み込まれるようです。全体的に、それは他の「正しい」ソリューションよりもはるかに変換します。これが、ページのパフォーマンスisが重要なWebサイトで一般的に使用される理由です。

ビジュアルを扱う場合、beingperfectはlookingperfect（and、in UX、feeling/seemingperfect）。
古代ギリシャ人は列を曲げて、下から見たときにまっすぐに見えるようにしました。

0
tao