バンドルされたバンドルJSと外部ライブラリ

Question

できるだけ私のWebサイトでHTTPリクエストを減らしたいと思います。

jQueryなどの外部ライブラリを含め、すべてのJSを1つの大きなミニファイルにまとめても問題ありませんか？

Answer 1

はい。これは完全に上質で一般的な習慣です。

ただし、GoogleのCDNからjQueryをロードするのではなく、バンドルに組み込むことをおすすめします。
これは、すでにGoogleのjQueryをキャッシュに保存しているユーザーの時間を節約します。

Answer 2

頻繁に行われます。開発チーム全体があなたのjsファイルに何があって何がないかを知っていることに注意してください。顧客のサイトに2〜3つ以上のjQueryインスタンスが含まれていることが何回表示されるのか、誰かがすでに縮小されたマスターファイルに入っていることを忘れていることがあります。

Answer 3

私は、これは結構ですが、これらの考慮事項を追加することを、ここで他の回答に同意：

• SLaksが言及したように、私はjQueryのためにGoogleのCDNを使用することが好ましいと思います。 Jqueryは約60kで、私はほとんどがGoogleのブラウザにキャッシュされていると確信しています。このCDNを使用する場合、ユーザーの大部分はこれをまったくダウンロードする必要はありません。さらに、CDNから自分でサービスしていない場合は、CDNの利点も得られます。

• 私はあなたが頭からこの単一のJSを読み込むことを計画していると仮定しています。それは一般的に悪い考えです。頭部のJavascriptはボディのローディングをブロックします。あなたは、あなたのページ内の他のスクリプトが依存している必要がある最小限の金額にヘッド内のjavascriptを制限したい。これにはしばしばJqueryが含まれます。したがって、余分な要求があったとしても、身体をレンダリングするための依存関係が含まれているスクリプトを先頭に1つのスクリプトを置いて、最後に他のすべてを含む2番目の大きなスクリプトを置く方が良いと強く信じています。 JSの残りの部分を非同期的に読み込む、動的に作成されたスクリプトタグを上部に作成する最後のスクリプト。ここで

は、ページのスクリプトの最後の例である：

<script type="text/javascript"> 

    (function() { 

     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.async = true; 
     script.src = 'http://mysite/js/mybigminifiedandmergedscript.js'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(script, s); 
    })(); 

</script> 

• あなたがすべてではロードされていない場合は、ページのユーザーエクスペリエンスを妨げないだろうと多くのスクリプトを持っている場合は、上記のスクリプトのように読み込まれたが、文書が完成するまで延期される第3のスクリプトに入れておきます。この方法では、そのスクリプトはページの「知覚された」パフォーマンスを妨げません。回転しているブラウザアイコンやプログレスバーがなくても、自動的にロードされます。

• .netを使用している場合は、OSS RequestReduceを使用することをお勧めします。これは、cssとjavascriptとスプライトを縮小してマージし、その場でイメージを最適化します。すべてあなたのコードを変更する必要はありません。 NugetとRequestReduce.comで利用できます。

Answer 4

いつものように、アプリケーションによって異なります。上記のすべての点に同意しますが、昔ながらの工学的アプローチは、少し最適化するために常にインターネットに接続されているという依存関係を作り出すことになります。

私たちには、jquery、jquery ui、d3js、関連するcss、そしてもちろん私たち自身のコードが機能するブラウザアプリケーションがあります。 さらに、クライアントはバリアントレイアウトを生成するためにソースhtmlを編集できる必要があります。

私たちは、すべての魔法のjsとcssが存在する単純な「手を触れない」行を選択しました。 htmlをオフラインで編集できるように、CDNのアプローチも廃止されました。

したがって、パフォーマンスの点ではるかに堅牢なソリューションです。

ベン