Vue.jsはレイアウトのジャンプを防ぎます

Question

私は、ロード時にコンテンツをプッシュサイドにプッシュする原因となるVue.jsコンポーネントをいくつか持っています。

は私がspecficallyているので、部品のように私のVueのコンポーネント用のカスタムHTMLタグを対象とするいくつかのCSSルールを作成してこれに対処するには、次の

custom-tag { 
    float: left; 
    width: 150px; 
    // etc. 
} 

この例では、CustomTag.vueのためになります。これは、Vue.jsが対応するVue.jsコンポーネントのこのカスタムタグをまだスワップアウトしていない場合に有効になります。だからこれは実際に私のレイアウトがjavascriptなしでも正しいことを確認します。

これは正常に動作しますが、これはまだ完全な解決策から遠いです。 Vue.jsがキャッシュされ、135KB（gzipped）の別のベンダーファイルに入れられても、Vue.jsが有効になるまでには時間がかかりすぎるような気がします。

Vue.jsの実際のソリューションや情報を見つけるのに苦労しているので、他の人たちがこれをどのように処理しているのか疑問に思っていますか？これはjavascriptが十分に速く読み込まれていないか、何かが私の最終的な問題ですか？

Answer 1

これは非常に奇妙ですが、レンダリング前にエンジンがコンパイルする必要がある非常に長いテンプレートでは可能かもしれません。

テンプレートを最初に前もって検討してください。私はレンダリングの前にあなたのHTMLにカスタムタグを持っていれば、あなたはそれをやっていないと思います... 可能であればsingle file componentsを使用してください。もしあなたがReactから来たのであれば、jsx for Vueが役に立つかもしれませんし、手でレンダリング機能を書くこともできます。

最初のレンダリングの時間を完全に無駄にしたい場合は、唯一の方法はserver-side renderingです。だからあなたのアプリはすでにそこに初期のhtml構造で提供されます。