現在、アプリケーション開発は基本的にフロントエンドとバックエンドに分離されています。主流のフロントエンドフレームワークには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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker を使用した Laravel アプリケーションのデプロイ例
>>: MySQL 5.7.20 のインストールと設定方法のグラフィック チュートリアル (win10)
mysql-5.7.9 では、ついにシャットダウン構文が提供されます。以前は、MySQL データベー...
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
1 実施原則これは、DOM 要素の dragstart/ondragover/ondrop イベント...
目次フィルター01.とは02. やり方(1)フィルターを定義する(2)使用方法(3)フィルタパラメー...
<br />Web ページに音楽を挿入する場合、サフィックスに応じて異なるコードを記述す...
方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...
ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...
ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...
1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...
<br /> 英語原文: http://desktoppub.about.com/od/...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...
この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...
1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...
explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方法で...