すべてのページにメインJavaScriptをロードしていますか？または、関連するページに分割しますか？

私が持っている700kbすべてのページにロードされて解凍JSファイルを。12各ページにjavascriptファイルを配置する前に、httpリクエストを減らすために、すべてを圧縮しました1 file。

このファイルはに~130kb gzipped提供されgzipます。ただし、ローカルコンピューターでは、すべてのページに展開されて読み込まれます。これはパフォーマンスの問題ですか？

firebugプロファイラーでJavaScriptのプロファイルを作成しましたが、問題は見られませんでした。私が直面している問題/幻想は、そのファイルに圧縮されたjqueryライブラリがあり、現在のページでは使用されないことがあるということです。

たとえば、jquery datatablesは200kb圧縮されており、2つのWebサイトページにのみロードされます。もう1つはjqplot、もう1つです200kb。

私は今持っている400kb上で実行されていない余分なコードの80%ページの。

すべてを1つのファイルに残す必要がありますか？

jqueryライブラリを取り出し、現在のページに関連するJSのみをロードする必要がありますか？

requirejsを使用して、そのページでのみ必要なライブラリを動的にロードできます。次に、すべてのページにrequirejs（約14k）を読み込むだけで、約385kb節約できます。

統合も非常に簡単です。必要なものを含むコードを「ラップ」するだけです。

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

フレームワーク/ CMS /何でも適切な機能がある場合、@ Michaelが示唆するようにスクリプトを条件付きで含めることができますが、追加のライブラリはありません。

たとえば、データテーブルの場合、WordPressは次のような状況を処理します。

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJSには何の問題もありません。追加する複雑さのレベル（さらに、そもそも使用することを学ぶこと）が、より簡単に入手できるツールでできることを相殺するかどうかを評価する必要があります。上記の2つのケースしかない場合、これはより良いオプションかもしれません。さらに多くのことが行われている場合は、RequireJSが全体的に優れたアプローチである可能性があります。

JavaScriptの700kbは、ページの読み込み後に解析する必要があるため、パフォーマンスの問題です。そのため、必要なスクリプトのみがロードされるように注意する必要があります。単一のページを離れることなくナビゲーションが内部的に処理される場合、GMailなどのフルAJAXサイトで1つの大きなJavaScriptで問題ない場合があります。ただし、完全なAJAXサイトでさえ、動的なJSロードを実行して、開始時に不要なJSをロードしないようにします（メモリと速度の両方の問題）。

HTTPトラフィックを減らしたいと言ってきました。HTTPキャッシングで遊ぶ必要があります。問題は、有効期限を高く設定した場合、キャッシュの有効期限が切れるまでJSへの変更が表示されない可能性があることです。

トリックは、あなたが参照していないこと、しかし、そこにあるmyscript.js、しかしmyscript.js?version={myversion}。アプリケーションの更新後にを変更し、{myversion}JavaScriptのリロードを強制します。

JavaScriptの〜700kbはパフォーマンスの問題であり、圧縮されている場合、コードを最適化する際に従うべきルールを確認する必要があります。

1. Javascriptの最小化 -単に圧縮と解凍を行いますが、コードは削減されませんでした。まず、優れたMinify JSツールを使用して、コードを最小化します。あなたは12のファイルであり、各ファイルは最高のパフォーマンスを得るためにクラブする前に個別に縮小します。

2. 非同期JavaScriptの読み込みを使用します。非同期読み込みを使用すると、ページの読み込み時間が非常に速くなり、レンダリングが行われます。優れた非同期読み込みはレンダリングプロセスをブロックせず、ページの読み込み時間を大幅に短縮できるため、ユーザーへの影響は非常に大きくなります。javascriptがロードされていないため、画像やその他の表示アイテムは定期的に表示されます。

3. JQUERYにGOOGLE cdnを使用します。JQUERYを使用し、独自のWebサイトから読み込んでいると思いますが、これも追加のデメリットです。GOQUELECDN（無料）を使用してJQUERYを読み込んでください。ほぼすべての3番目のWebサイトで使用されているため、キャッシュ内のクライアントコンピューターで既に利用可能です。

4. カスタムの長いExpiresヘッダー：読み込み時間の問題で Webサイトがどのように読み込まれるかについては、HTTP JSファイルのLong Expiresを指定する必要があります。私の調査によると、2ページ目にかかった読み込み時間は、1回目のページ訪問に比べて多くの離脱があります。

5. ページ速度で確認する：他のリソースもページの読み込み速度に優しくクロスチェックし、他のリソースも最適化しようとする場合があります。すべてのリソースで少しずつステップを実行すると、JSのロードに余分な時間がかかります。