サイトのURLの文字列を判断してコンテンツの一部を変えたい

1つのphpファイルに全て条件を書き込むと、ファイルが重くなってしまう？表示が遅くなる？
かもしれませんので。

前の質問のコメントでも書きましたが、数百程度であれば遅くなるかどうかは、あまり気にする必要がありません。
どちらかというと、その数百のデータをどうやって管理する（最初の入力、追加、変更など）か、を気にした方が良いです。
データベースを使うのは大げさな気もするので、タブ区切りでデータを持つ形をふたつほど。

前回の質問でやり取りした感じだと、表示の対象となるエリアには切り替えたいメッセージ以外に画像やらリンクやらがありそうなので、以下のような前提をしています。

• 対象のエリアには id 属性で目印をつける（id="area-3")
• 対象エリア内のメッセージを表示する領域には class 属性で目印をつける (class="message")

まず、ひとつめは、ページ内の別のタグにデータだけを持っておく形式。
id="message-data" のタグの中に、key と文字列をタブ区切りで書いておきます。

<!-- key と文字列の対応 -->
<script type="application/data" id="message-data">
大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ
</script>

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var e = document.getElementById("message-data");
            var tmp = e.innerHTML.split("\n");
            var msg = "";
            var key = decodeURIComponent(m[1]);
            for (var i = 0 ; i < tmp.length ; ++i) {
                var tmp2 = tmp[i].split(/\t/);
                if (tmp2.length > 1) {
                    var re = new RegExp(tmp2[0]);
                    if (re.test(key)) {
                        console.log(tmp2[0]);
                        msg = tmp2[1];
                        break;
                    }
                }
            }
            if (msg != "") {
                var e = document.getElementById("area-3");
                var em = e.querySelector(".message");
                em.innerHTML = msg;
                e.style.display = "";
            }
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>

もうひとつは、別のファイルにデータを持つ形式。
ページと同じところにある message.txt というファイルに以下のように key と文字列をタブ区切りでデータを持っています。

大阪    大阪でっせ
広島    広島じゃけえ
札幌    道産子だべ

こちらがページ内のスクリプトなど。

<!-- 表示する処理 -->
<script>
(function() {
    var m = /\bkey=(.*?)(&|$)/.exec(location.search);
    if (m) {
        window.addEventListener("load", function(ev) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "message.txt");     // ★message.txt からデータを取得する
            xhr.onload = function(ev) {
                var tmp = ev.target.responseText.split("\n");
                var msg = "";
                var key = decodeURIComponent(m[1]);
                for (var i = 0 ; i < tmp.length ; ++i) {
                    var tmp2 = tmp[i].split(/\t/);
                    if (tmp2.length > 1) {
                        var re = new RegExp(tmp2[0]);
                        if (re.test(key)) {
                            console.log(tmp2[0]);
                            msg = tmp2[1];
                            break;
                        }
                    }
                }
                if (msg != "") {
                    var e = document.getElementById("area-3");
                    var em = e.querySelector(".message");
                    em.innerHTML = msg;
                    e.style.display = "";
                }
            };
            xhr.send();
        });
    }
})();
</script>

<!-- 表示するエリア -->
<div id="area-3" style="display: none;">
    <img src="message-logo.png">
    <span class="message"></span>
</div>

後者は、ページとは別にデータをあらためて読みに行くので通信が一回増えます。
その代わり、ページ内のスクリプトは小さいので、key がパラメータとして指定されないケースがそれなりにあるのなら、平均して軽くなるかも、という期待はあります。

前者は、ページの中にデータを抱えてしまっているので、key がパラメータとして指定されない場合には使いもしないデータを毎回読んでいる、という言い方はできます。
その代わり、key は必ず指定される、という想定であれば、通信を一回にまとめられているので、軽いという言い方はできます。

とは言っても、この程度の量であれば今どきの環境であれば、誤差程度の違いしかありません。