小さいjsファイルを1つにまとめる

Question

私のPHPウェブサイトで使用されているjsコードを整理して、読み込み速度を上げたい。現時点では、すべてのWebサイトに必要なjsファイルを含めています。 私の計画は、すべてのjsファイルを1つの大きなファイルにマージすることです。すべてのページがすべてのjsコードを使用するわけではないので、私は何かを始めましたが、これが意味をなさないかどうかわかりません。

私はすでに記事One JS File for Multiple Pagesを読んでいますが、ポールアイルランドの方法は初心者として私にとって（今のところ）複雑です。

これは私のアプローチです： 私は、ファイルのCore.jsを作成して、私が最初に対応するページの名前を取得...などのすべてのウェブサイト上のCore.jsで

<script src="js/core.js"></script> 

それを呼び出します。

var path = window.location.pathname; 
var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

次に、どのサイトにどのjsスクリプト（擬似コード）が必要かを確認します。

if (page_name == 'xyz'){ 
execute this code which is only used on this site 
} 

if (page_name == 'abc' || 'xyz' || 'def'){ 
execute another code which is used on multiple sites 
} 

if (page_name == 'ghi' || 'jkl' || 'mno' || 'xyz'){ 
include jquery for multiple sites 
} 
... 
... 

私はJSがたくさんあるので、私はこれは整理するための良い解決策である場合には、第1お願いしたかったので、これは、私のために多くの作業を意味しています。

ところで：私のウェブサイト上のjsコードは頻繁に変更されません。

はミッシュ

Answer 1

を使用したいコードを初期化

PAGE3など、PAGE2、あなたがPage1のようなページを考えてみましょうあなたの問題の解決策のようなものかもしれない

：

if(selector) { 
//run code 
} 

これは、特定のセレクタが存在する場合にのみブロック内のコードを実行します。この方法では、ページの名前を取得したり、文字列を分割したり、スライスしたりするなどのすべての手間を経る必要はありません（これもエラーになりがちです）。ID #fooを持つノードが存在する場合にのみ呼び出され、この方法bar

function bar (text) { 
    alert(text) 
} 

if(document.getElementById('#foo')) { 
    bar('#foo exists!') 
} 

：

だから、このようになりますあなたには、いくつかのノード上で、いくつかのinnerHTMLを追加したいのは、言うことができます。

Answer 2

は賢明なグループにあなたのjavascriptを分割

ありがとうございます。サイトに管理セクションがあるかもしれませんので、admin.jsにしてください。

ほとんどのブラウザでは、javascriptファイルを一度ダウンロードしてからキャッシュするだけです。あなたのコードは頻繁に変更されないので、すべてのファイルを1つのファイルにまとめることは実際にそれほど影響を及ぼさないことがわかります。

Answer 3

正直言って、これはあなたのパフォーマンスを低下させるだけです。ユーザーがWebサイトで長い時間を過ごしていると、1つのファイルでコードの混乱が少なくなります。しかし、ユーザーが数ページしか訪れていない場合、1つのファイルが帯域幅に負担をかけるだけです。あなたのユーザーのほとんどは、あなたのjの半分以上を必要としない可能性もあります。

さらに、これらの余分な条件は本当に誰も助けていません。だから、私は、単一のファイルオプションを使用しないと言うだろう。

Answer 4

次に、あなたのcore.jsは、すべてのページのすべてのコードが含まれますし、その後、ちょうどあなたが

var page1= (function() { 
       var Init = function(){ 
       //write the codes used by page 1 
       }; 
       return { 
       Initialize: function() { 
        Init(); 
       } 
       }; 
      })(); 

var page2= (function() { 
       var Init = function(){ 
       //write the codes used by page 2 
       }; 
       return { 
       Initialize: function() { 
        Init(); 
       } 
       }; 
      })(); 
var page3= (function() {......}); 

var page = path.split("/").pop(); 
var path = window.location.pathname; 

var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

if (page_name == 'pg1'){ 
    page1.Initialize(); 
} 

if (page_name == 'pg2' || 'pg3'){ 
    page2.Initialize(); 
    page3.Initialize(); 
} 

if (page_name == 'pg4'){ 
    page4.Initialize(); 
}