2012-09-02 18 views
74

これはウェブの人にとっては間違った質問かもしれません。しかし、私はこれ以上少し混乱しています。今、さまざまなタスクを実行するためにいくつかのJavascriptファイルを使用しているアプリケーションがあります。さて、私はすべてのファイルを結合し、縮小するためにJavascript bundlerを使用しています。したがって、実行時にapp.min.jsファイルは1つだけ存在します。現在、Requirejsは、実行時にモジュールまたはファイルをロードするために使用されます。ですから、すでにすべてのものを1つのファイルに収めていれば、requirejが必要なのでしょうか?またはrequirejsやbundlerを使用できるユースケースのシナリオは何ですか?Requirejsを使用するタイミングとバンドルされたjavascriptを使用するタイミング

詳細が必要な場合はお知らせください。

+1

私はなぜ両方が必要なのか分かりません。あなたはそうするだろうと思いますか? – nnnnnn

+2

それは混乱です。何を使うの?または、1つだけを選択する必要がありますか? – kunjee

答えて

27

これは多くの熟練したjavascript開発者の間で激しく争われている問題です。他の言語の多くは、プログラム全体がバンドルされている(JBossの.WARファイルが思い浮かぶ)「コンパイル」フェーズがあります。より伝統的な背景から来たプログラマーは、しばしばこのアプローチに賛成です。

Javascriptは、近年厳しいベストプラクティスを示すのが難しいが、Javascriptのより機能的な性質を理解している人は、require.jsのようなモジュールローディングアプローチを好むことが多い。

私は、require.jsとよく似ているFrame.jsを書きました。私の偏見はモジュールローダーのアプローチに向かっています。

あなたの質問に直接答えるには、はい、それはどちらか一方です。

ほとんどの場合、スクリプトを1つのファイルにパッケージングすると主張するのは、より圧縮を可能にし、より効率的であると考えられます。 (1)モジュールのロード時間がセッション全体に分散されている、(2)個々のモジュールがほぼ同じ割合に圧縮されている、(3)個々のモジュールがキャッシュされている可能性がある(4)最終的に必要なときにのみスクリプトを読み込むことで、一部のユーザーにはコードを少なくロードし、全体的に多くのコードをロードすることができます。

動的スクリプト読み込みの利点を見ることができれば、長期的にはそれを使用してください。そうでない場合は、スクリプトを1つのファイルにまとめます。

+5

私はファイルを別々に保つ利点を理解していますが、バンドルすることで必要なHTTP接続の数も減ると思います。ブラウザやサーバーのパイプライン化がより広く利用されるようになるにつれ、これは重要な問題ではありませんが、現在のところかなり大きな問題です。 –

+4

アプリケーションが大きい場合は、http接続のオーバーヘッドが高速にマウントされます。私たちのアプリでは、アンパックモードで実行し、各JSファイルを個別にロードすると、ページをロードするのにおよそ15〜30秒かかります。パックモードでは約1秒です。 –

+0

1パックのキャッシュされたファイルは、実際にはロードできなかった数十億のファイルを読み込むよりもはるかに高速です。また、ロードするまでにどれくらい時間がかかります。したがって、すべてをクライアントにダンプする方がよいでしょう。ほとんどの場合、この単一のファイルは1MBのサイズをとにかく通過することはなく、おそらくは縮小されgzipされた後にはるかに少なくなります。そう、シングルファイルFTW。 – vsync

46

一般に、開発中はRequireJSのみを読み込みフォームで使用します。サイトが完了し、展開の準備が整ったら、コードを縮小します。ここでの利点は、RequireJSが依存関係が何であるかを正確に知っているため、正しい順序でコードを簡単に縮小できます。ここでは、RequireJS websiteにこう言われる、

あなたは、あなたが一緒にJavaScriptファイルを結合し、それを縮小化するオプティマイザを使用することができ、開発をやって終了し、エンドユーザーのために、あなたのコードを展開するされたら。上記の例では、main.jsとhelper/util.jsを1つのファイルに結合し、その結果を縮小することができます。

+4

私はこれが古いスレッドだと知っていますが、私は同様の疑問を持っていたので私は遭遇しました。あなたが気にしないならば、すべてのアプリケーションを1つのファイルにまとめて展開すると、私のアプリケーション全体が片方向(オンデマンド)ではなく、ワンショットで読み込まれます。これはAMDと矛盾していませんか? –

+5

はい、それはある意味です。しかし、AMDはより理論的であり、requirejsは実世界のパフォーマンス問題にも関係しています。個別に各モジュールをロードすることは間違いなくよりクリーンで純粋ですが、永遠にかかるでしょう:) –

+1

私はまたこの質問を置くので参照してくださいhttp://stackoverflow.com/questions/20515679/requirejs-to-bundle-or-not-to-バンドル/ 20518314?noredirect = 1#20518314おそらく2つのアプローチの中間点でしょうか? –

11

これはアプリケーションによって異なります。わずかなjavascript(100kb以下)を使ってサーバー側のアプリケーションを作っていて、総バンドルを行っているのであれば、おそらく大丈夫だろう。

しかし、javascriptアプリケーションを作成していて、そこに多量のコードがある場合は、ニーズが異なることになります。

たとえば、私のアプリではすべてのコアファイルがバンドルされています。 jQuery、アンダースコア、バックボーン、メインアプリケーションファイル、ユーザーログインシステム、レイアウトシステム、通知、チャットシステムはすべて私の大きな初期ファイルの一部です。

しかし、他の多くのモジュールも初期バンドルの一部ではなく、後でロードされます。

フォーラム、wiki、wysiwyg、カラーピッカー、ドラッグ&ドロップ、カレンダー、およびいくつかのアニメーションファイルは、2番目のカテゴリの一部です。あなたは一般的に使用されているものとすぐに必要とされるものと遅れるものとについて合理的な決定をする必要があります。

私がすぐにすべてを取り入れると、私はジャガスクリプトの上に乗ることができます。これは狂気になり、最初の起動を容認できないほど遅くします。

最初のファイルからinitSuccessイベントが発生した後、2番目のカテゴリがダウンロードを開始します。

しかし、第2のカテゴリは、より重要なものを最初に読み込む点で、第1のカテゴリよりもインテリジェントです。例えば、あなたがwikiを見ているなら、wikiをロードしてからカラーピッカーをロードします。

関連する問題