Vueプロジェクトでスケルトンスクリーンを使用する方法

Vueプロジェクトでスケルトンスクリーンを使用する方法

現在、アプリケーション開発は基本的にフロントエンドとバックエンドに分離されています。主流のフロントエンドフレームワークにはSPA、MPAなどが含まれるため、ページのレンダリングと白画面時間の解決が主な懸念事項になります。

Webpack はオンデマンドで読み込むことができるため、最初の画面に読み込む必要があるコードのサイズが削減されます。

CDN テクノロジー、静的コード、その他のキャッシュ テクノロジーを使用すると、読み込み時間とレンダリング時間を短縮できます。

問題: しかし、ホームページには依然として読み込みとレンダリングの待ち時間が長いという問題があります。では、視覚的な観点から最初の白い画面の時間を短縮するにはどうすればよいでしょうか?

スケルトン画面:例えば:実際には、テンプレートファイル内の id=app コンテナ配下に表示したいエフェクトを記述します。new Vue(option) の後に、id 配下のコンテンツが置き換えられます(このとき、Vue がコンパイルして生成したコンテンツはまだマウントされていない可能性があります。new Vue を使用すると一連の初期化が行われるため、これにも時間がかかります)。これにより、白い画面の時間を視覚的に短縮できます

スケルトンスクリーンの実装方法

1. テンプレートファイルid=appコンテナの直下に、表示したいエフェクトHTMLを記述します。

2. テンプレートファイルid=appコンテナの直下に画像を表示する

3. vue ssrが提供するwebpackプラグインを使用する

4. 静的スケルトン画面を自動生成して挿入する

方法 1 と方法 2 の欠点: 表示効果は異なる入口でも同じであるため、異なる入口に異なるスタイルを柔軟に表示することができません。

方法 3 では、入口ごとに異なる効果を表示できます。 (本質的には、まず ssr を通じて json ファイルが生成され、次に json ファイルの内容がテンプレート ファイルの id=app コンテナーに挿入されます)

解決策1: テンプレートファイルid=appコンテナの直下に表示したいHTMLを記述する

赤い円で示したように、ルートディレクトリのテンプレートファイルの内容を記述します。

ブラウザでプロジェクトを開く

新しい Vue を呼び出す前の表示効果 (単純な効果なので、気に入らなくても批判しないでください):

elements 内の id=app のコンテナーの下のコンテンツを確認できます。これは、書き込んだスケルトン スクリーン効果コンテンツです。

新しい Vue を調整すると、id=app コンテナの下のコンテンツが、vue によってコンパイルされたコンテンツに置き換えられます。

解決策 2: テンプレート ファイル id=app コンテナーの直下に画像を表示する (これは表示されません)

解決策3: vue ssrが提供するwebpackプラグインを使用する: .vueファイルを使用してスケルトン画面を完成させる

ソリューション 1 に基づいて、スケルトン画面コードを抽出します。テンプレート ファイルにコードを書く代わりに、vue ファイルにエフェクト コードを書くため、メンテナンスが容易になります。

1. ルート ディレクトリにスケルトン フォルダーを作成し、App.vue (ルート コンポーネント、Vue プロジェクトの App.vue に類似)、home.skeleton.vue (ホームページにスケルトン スクリーン効果を表示するためのコード、Vue プロジェクトで記述されたルーティング ページに類似)、skeleton-entry.js (Vue プロジェクトのエントリ ファイルに類似したエントリ ファイル)、plugin/server-plugin.js (vue-server-renderer パッケージは server-plugin プラグインを提供します。そこからコードをコピーします) を作成します。

home.skeleton.vue (ホームページにスケルトンスクリーン効果を表示するためのコード)

<テンプレート>
  <div class="skeleton-home">
    <div>読み込み中...</div>
  </div>
</テンプレート>
 
<スタイル>
.スケルトンホーム{
  幅:100vw;
  高さ:100vh;
  背景色: #eaeaea;
}
</スタイル>

App.vue (ルートコンポーネント)

<テンプレート>
  <div id="アプリ">
    <!-- ルート コンポーネント -->
    <home style="display:none" id="homeスケルトン"></home>
  </div>
</テンプレート>
<スクリプト>
'./home.skeleton.vue' から home をインポートします。
エクスポートデフォルト{
  コンポーネント:
    家
  }
}
</スクリプト>
<スタイル>
#アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
}
*{
  パディング: 0;
  マージン: 0;
}
</スタイル>

skeleton-entry.js (エントリーファイル)

//エントリファイルimport Vue from 'vue'
'./App.vue' からアプリをインポートします。
スケルトンを新しいVue({
  レンダリング(h) {
    h(App)を返す
  }
})
デフォルトのスケルトンをエクスポート

plugin/server-plugin.js (vue-server-renderer パッケージは server-plugin プラグインを提供します)

'厳密な使用';
 
/* */
 
var isJS = function (file) { return /\.js(\?[^.]+)?$/.test(file); };
 
var ref = require('chalk');
var red = ref.red;
var yellow = ref.yellow;
 
var prefix = "[vue-server-renderer-webpack-plugin]";
var warn = exports.warn = function (msg) { return console.error(red((prefix + " " + msg + "\n"))); };
var tip = exports.tip = function (msg) { return console.log(yellow((prefix + " " + msg + "\n"))); };
 
var 検証 = 関数 (コンパイラ) {
  コンパイラオプションのターゲットが 'ノード' の場合
    warn('webpack config `target` は "node" である必要があります。');
  }
 
  コンパイラオプションの出力とコンパイラオプションの出力ライブラリターゲットが 'commonjs2' の場合、
    warn('webpack config `output.libraryTarget` は "commonjs2" である必要があります。');
  }
 
  コンパイラオプションの外部がある場合
    ヒント(
      'サーバービルドの依存関係を外部化することをお勧めします' +
      「ビルドパフォーマンスが向上します。」
    );
  }
};
 
var VueSSRServerPlugin = 関数 VueSSRServerPlugin (オプション) {
  オプションがvoid 0の場合、オプションは{}になります。
 
  this.options = Object.assign({
    ファイル名: 'vue-ssr-server-bundle.json'
  }, オプション);
};
 
VueSSRServerPlugin.prototype.apply = 関数 apply (コンパイラ) {
    var this$1 = this;
 
  検証(コンパイラ);
 
  コンパイラ.プラグイン('emit', 関数(コンパイル, cb) {
    var stats = compilation.getStats().toJson();
    var entryName = Object.keys(stats.entrypoints)[0];
    var entryAssets = stats.entrypoints[entryName].assets.filter(isJS);
 
    エントリアセットの長さが1より大きい場合
      新しいエラーをスローします(
        「サーバー側バンドルには 1 つのエントリ ファイルが必要です。」 +
        「サーバー設定で CommonsChunkPlugin を使用しないでください。」
      )
    }
 
    var エントリ = entryAssets[0];
    if (!entry || typeof entry !== 'string') {
      新しいエラーをスローします(
        ("エントリ \"" + entryName + "\" が見つかりません。正しいエントリ オプションを指定しましたか?")
      )
    }
 
    varバンドル = {
      エントリ: エントリ、
      ファイル: {},
      マップ: {}
    };
 
    stats.assets.forEach(関数(アセット) {
      アセット名が一致する場合(/\.js$/) {
        bundle.files[asset.name] = compilation.assets[asset.name].source();
      } そうでない場合 (asset.name.match(/\.js\.map$/)) {
        bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
      }
      // サーバーには何も出力しない
      compilation.assets[asset.name]を削除します。
    });
 
    var json = JSON.stringify(bundle, null, 2);
    var ファイル名 = this$1.options.filename;
 
    compilation.assets[ファイル名] = {
      ソース: function () { return json; },
      サイズ: function () { return json.length; }
    };
 
    関数 :
  });
};
 
モジュールをエクスポートします。

2. スケルトン画面ビルド構成ファイルを作成します: build/webpack.skeleton.conf.js。このファイルはvue-server-rendererプラグインと連携して、App.vueコンテンツを単一のjson形式ファイルにビルドします。

「厳密な使用」
 
定数パス = require('path')
定数 nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('../skeleton/plugin/server-plugin')
 
モジュール.エクスポート = {
  // これにより、webpack は Node に適した方法で動的インポートを処理できるようになります。
  // また、Vueコンポーネントをコンパイルするときにも、
  // `vue-loader` にサーバー指向のコードを配信するように指示します。
  ターゲット: 'ノード',
 
  // バンドル レンダラーのソース マップ サポートを提供する devtool: 'source-map',
 
  // エントリをアプリケーションのサーバーエントリファイルエントリにポイントします: path.resolve(__dirname, '../skeleton/skeleton-entry.js'),
 
  出力: {
    path: path.resolve(__dirname, '../skeleton'), // 生成されたファイルのディレクトリ publicPath: '/skeleton/',
    ファイル名: '[name].js',
    libraryTarget: 'commonjs2' // これはサーバーバンドルにNodeスタイルのエクスポートを使用するように指示します
  },
 
  モジュール: {
    ルール:
      {
        テスト: /\.vue$/,
        ローダー: 'vue-loader',
        オプション:
          コンパイラオプション: {
            空白を保持:false
          }
        }
      },
      {
        テスト: /\.css$/,
        使用: ['vue-style-loader', 'css-loader']
      }
    ]
  },
 
  パフォーマンス:
    ヒント: 偽
  },
 
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // アプリケーション依存モジュールを外部化します。サーバー構築を高速化できる
  // より小さいバンドル ファイルを生成します。
  外部: nodeExternals({
    // webpack が処理する必要がある依存関係を外部化しないでください。
    // ここでさらにファイルタイプを追加できます。たとえば、*.vue rawファイルは処理されません。
    // `global` を変更する依存モジュール (ポリフィルなど) もホワイトリストに追加する必要があります。ホワイトリスト: /\.css$/
  })、
 
  // これは、サーバーの出力全体を 1 つの JSON ファイルに構築するプラグインです。
  // ファイル名が設定されていない場合、デフォルトのファイル名は `vue-ssr-server-bundle.json` になります
  プラグイン: [
    新しいVueSSRServerPlugin({
      ファイル名: 'skeleton.json'
    })
  ]
}

3. webpack-cliを使用してwebpack.skeleton.conf.jsファイルを実行し、skeleton.jsonファイルを生成してスケルトンフォルダに配置します。

package.jsonファイルにコマンドを記述して実行します: create-skeleton

  「スクリプト」: {
    "create-skeleton": "webpack --progress --config build/webpack.skeleton.conf.js",
    "fill-skeleton": "ノード ./skeleton/skeleton.js"
  }

コンソールでコマンドを実行します:

npm 実行 create-skeleton

スケルトンフォルダの下に追加のskeleton.jsonファイルがあります。

4. 生成されたskeleton.jsonコンテンツをルートディレクトリのindex.html(テンプレートファイル)に挿入します。

1) スケルトンフォルダに新しいskeleton.jsを作成します。

// 生成された skeleton.json の内容をテンプレート ファイルに入力します const fs = require('fs')
const { 解決 } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
// skeleton.json を読み取り、skeleton/index.html をテンプレートとして使用してコンテンツを書き込みます const renderer = createBundleRenderer(resolve(__dirname, '../skeleton/skeleton.json'), {
  テンプレート: fs.readFileSync(resolve(__dirname, '../skeleton/index.html'), 'utf-8')
})
// 前のテンプレートの内容をルートディレクトリのテンプレートファイル 'index.html' に書き込みます
レンダラー.renderToString({}, (err, html) => {
  もし(エラー){
    console.log(err) を返します
  }
  console.log('レンダリングが完了しました!')
  fs.writeFileSync('index.html', html, 'utf-8')
})

2) 実行コマンドを追加します: fill-skeleton

"fill-skeleton": "ノード ./skeleton/skeleton.js"

3) コンソールでこのコマンドを実行すると、skeleton.json ファイルの内容がルート ディレクトリのテンプレート ファイル index.html に入力されます。

参考記事:

スケルトン スクリーン インジェクションに Vue SSR を使用する: https://www.cnblogs.com/goloving/p/11397371.html

Vue でスケルトン スクリーンを実装する: http://www.360doc.com/content/20/0709/11/21412_923150401.shtml

Vue ssr レンダリングの落とし穴: https://blog.csdn.net/chen801090/article/details/105974987/

これで、vue プロジェクトでスケルトン スクリーンを使用する方法に関するこの記事は終了です。vue スケルトン スクリーンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでスケルトンスクリーンを実装する例
  • Vueプロジェクトのスケルトンスクリーンインジェクションの実践についての簡単な説明
  • Vueモバイル端末にスケルトン画面を注入する設定方法
  • VUEシングルページアプリケーションスケルトンスクリーンソリューションの詳細な説明
  • vue-cli を使用してスケルトン スクリーンを構築する方法の例
  • Vueページのスケルトン画面の実装方法
  • Vue ページ スケルトン スクリーン インジェクション メソッド
  • Vueシングルページスケルトン画面実践記録について

<<:  Docker を使用した Laravel アプリケーションのデプロイ例

>>:  MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)

推薦する

Mysql トランザクションで Update を実行するとテーブルがロックされますか?

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...

ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い

概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティス...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

Vueカスタムv-has命令、ボタン権限判定の手順

目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...

MySQLにデータを素早くインポートする方法

序文:日々の勉強や仕事の中で、データをエクスポートする必要に迫られることがよくあります。たとえば、デ...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

CSS オーバーフローラップの新しいプロパティ値をどこでも使用

1.まず、overflow-wrap属性を理解する CSS のoverflow-wrapプロパティは...

Docker プライベートリポジトリの管理とローカルリポジトリ内のイメージの削除

1: Dockerプライベートウェアハウスのインストール1. イメージリポジトリからイメージをダウン...

DockerコンテナにNFS共有ディレクトリをマウントする実装

以前、https://www.jb51.net/article/205922.htm で、Docke...

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

MySQLインデックスとは何ですか?わからない場合は聞いてください

目次概要二分木からB+木へクラスター化インデックス非クラスター化インデックスジョイントインデックスと...

Ajax jQueryはページ上のdivの更新効果を実現します

元のコードは次のとおりです。 <div class='コントロールグループ'&...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

データベースクエリの最適化: サブクエリの最適化

1. 事例会社のトップ以外の従業員全員を年齢別にグループ化します。 t_emp で id が存在しな...