javascriptファイルは１つに統合できますか

質問

javascript初心者のため、どなたかご教示いただけるとありがたいです。

html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。

＜現状＞
<script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script>
<script type="text/javascript" src="・・/js/jquery.cookie.js"></script>
<script type="text/javascript" src="・・・/js/ui.core.js"></script>
<script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script>
<script type="text/javascript" src="・・・/js/set_slider.js"></script>
・・・

jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？
（単純に1箇所にコピー＆ペーストするようなイメージで）

お手数ですが、ご教示のほど、宜しくお願い致します。

回答No.2

Chaire · ベストアンサー

外部スクリプトの読み込みは、原則として（いくつかの例外を除き）順番通りです。1.js を読み込んだら 2.js、それも終わったら 3.js……のようにです。

裏を返せば、1.js が読み込まれない限り 2.js も 3.js も読み込まれず、しかも後続のページ描画すらストップしてしまうわけです。

ですから、1 個の外部スクリプトにまとめることは非常に大切です。そのためには「もともと読み込んでいた順番通りに」1 個のスクリプトファイルに書き写していけば、まずは十分です。ただし、ライセンスの表記を消さないように注意して下さい。

No.1 のご懸念の通り、使わない部分も書いてしまうのは無駄に思えるかもしれません。しかしながら、たかだか数十～数百 kB のファイルサイズの心配よりは、HTTP コネクションの数を減らすことの方が、はるかに速度向上につながります。キャッシュも効きますからね。

---
Web アプリケーションならば、表示されたボタンを押しても何も起きない、なんて事態になっては困りますので、ボタンを表示する前にスクリプトを読み込んでおく必要があります。しかし、普通の Web ページでは、スクリプトが動作することよりもページ内容をなるべく早く表示させることの方が重要です。

head 要素内に 5 個も 6 個も外部スクリプトを並べてページ描画をスタックさせるよりは、1 個にまとめるか、あるいはページ末尾にでも置いた方がずっとマシです。「スクリプトのオンデマンドな読み込み」なんて色気を出して良いのは、開発中かせいぜいテストまでです。実運用を開始するときは、なるべく 1 ファイルにまとめて下さい。

回答No.1

fujillin

基本的には、つなげて一つのファイルにしてもいけるはずです。
ただし、charsetが同じになっていることや実行順が正しくなっていることが必要です。

でも、まとめてしまうと使わない部分がある時でも全部を読み込んで実行してしまうので、無駄になる場合がありそう。

つなげなくても、以下の質問に出ているような方法でも可能です。
　http://okwave.jp/qa/q6469598.html
このような方法の場合、回答No3様があげられている参考サイトが役に立つかも。