Polymer App Shellにはどうしたらいいですか？

Question

私はProgressive Web App環境に入り始めています。Polymer Single Page AppでASP.NET 4.6とMVC5を使っています。私はApp Shellに何を含めるべきなのだろうと思っていましたか？

これまでは、app-location、app-route、app-toolbar、app-drawer-layoutをPolymerで作成しました。ファイルサイズは266 KBで、最初の読み込み時にHTMLをインラインで挿入します。

これは、ナビゲーションバーを視覚的にロードするだけです。 navbarには、paper-tab要素と私のカスタムlogin要素が必要です。私はそれらを拳の負荷に含めるべきですか？

他のすべては遅延ロードされています。

Answer 1

これは私の前の答えで説明したものの例です。

遅延ロードしたいという要素をという名前で構築したとします。それはhttp://example.com/lazy-element.htmlにあります。ここにロードする方法があります。

参照現在の要素の遅延要素。

<lazy-element></lazy-element> 

プロジェクトがロードされると、この要素はまだロードされていないため何も行いません。そこで、遅延ロードする関数を作成しましょう。あなたのプロジェクトのどこかにこの関数を含めてください（おそらく、私たちが怠惰なローディングをしている要素のプライベート関数として）。今

_loadElement: function(pathToElement) { 
    this.importHref(pathToElement, function() { 
    console.log(pathToElement + ' loaded'); 
    }.bind(this), function() { 
    console.warn(pathToElement + ' failed to load'); 
    }.bind(this)); 
} 

プロジェクトで有効にする怠惰な要素をしたい時はいつでも、この機能搭載怠惰な要素を呼び出します。おそらく、あなたのプロジェクトが準備完了してから5秒後に起動したいと思うかもしれません。

ready: function() { 
    window.setTimeout(function() { 
    this._loadElement('http://example.com/lazy-element.html'); 
    }, 5000); 
} 

Answer 2

あなたが使っているものだけを入れてください。あなたが必要なものを持っていない場合は、それが必要なときに追加してください。

実際に洗練されたものにしたい場合は、this.importHrefを使用して、ポリマー要素を遅延ロードすることができます。しかし、怠惰なローディング要素は、読み込まなければならない要素の長いチェーンを作成するために遅延ロードされる他のポリマー要素に依存する可能性があるので、注意する必要があります。

アプリの最初の読み込みで頻繁に使用する要素と、アプリの特定の場所で1回または2回しか使用されない遅延読み込み要素を試して保存します。