2017-11-01 8 views
0

私は、cliツールを使用して最小ポリマー2アプリケーションを作成しました。何も変更せずにポリマーを供給するだけで、最初の訪問の初期ロード時間はFast3Gで4秒になります。ポリマーの製造後も4秒間残っている。上部には本来ポリマーのローディング時間が遅い

は、シェルのための任意のHTMLインポートのための時間をロードするポリマー要素、firebase、...

は、私はちょうど4S +のロード時間を受け入れ、index.htmlの中でローダーを使用する必要がありますか、サーバ - されていますサイドレンダリング& ampまたはその他の回避策が必要ですか?何か不足していますか?

私はサービスワーカーとの2回目の訪問のスピードを上げることができると知っていますが、最初の訪問者は常に忍耐強くなければなりません。

ここでは、コード(ポリマー-CLIから変更なし)

のindex.html:デフォルトポリマーによって

<!DOCTYPE html><html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> 

     <title>polymer_min.</title> 
     <meta name="description" content="testing minimal loading time for Polymer app"> 

     <link rel="manifest" href="/manifest.json"> 

     <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script> 

     <link rel="import" href="/src/polymer_min-app/polymer_min-app.html 
    </head> 
    <body> 
     <polymer_min-app></polymer_min-app> 
    </body> 
</html> 

Polymer_minアプリ

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 

<dom-module id="polymer_min-app"> 
    <template> 
     <style> 
      :host { 
       display: block; 
      } 
     </style> 
     <h2>Hello [[prop1]]!</h2> 
    </template> 

    <script> 
     class Polymer_minApp extends Polymer.Element { 
      static get is() { return 'polymer_min-app'; } 
      static get properties() { 
       return { 
        prop1: { 
         type: String, 
         value: 'polymer_min-app' 
        } 
       }; 
      } 
     } 

     window.customElements.define(Polymer_minApp.is, Polymer_minApp); 
    </script> 
</dom-module> 

答えて

0

が任意に別々のファイルとしてその依存関係をロードしますその結果、数秒間の読み込み時間がかかります。あなたのDev Toolsのネットワークタブに "waterfall"が表示されます。たとえば、私たちのツールの1つは、起動時に100以上の要求を要素のような依存関係をロードするようにします。

サービスワーカーを使用しない場合、サーバーサイドレンダリング、クライアントサイドキャッシング、または同様の方法で、ページの読み込みに匹敵する読み込み時間が得られます。

ビルドディレクトリからインデックスファイルを読み込まない限り、アプリケーションをバンドルしても影響はありません。依存関係(例:bower_comonentsから)は、ビルドのsrcサブフォルダ内のアプリ要素に焼き付けられ、醜いコードの要求が少なくなります。つまり、ワイヤでバイト数を減らすことができます。上記のアウトツールは、バンドルによって重量の約50%を無駄にし、負荷を15回しか要求しません。

サンプル画像https://imgur.com/a/g9UPM

独立して、少なくとも、あなたのサーバーを構成することで、キャッシュの世話をする、または多分サービスワーカーを使用する必要がありますをバンドルします。 NodeJSを実行すると、https://github.com/Polymer/prpl-server-nodeが表示される場合があります。

+0

imgur - niceサイトをチェックアウトしました.2番目の負荷で大きな負荷がかかっていました.3G以上の負荷で私のサイトと同じ問題が発生しました。 –

関連する問題