web-dev-qa-db-ja.com

Requirejsを使用する場合と、バンドルされたjavascriptを使用する場合

これはウェブ関係者にとっては馬鹿げた質問かもしれません。しかし、私はこれについて少し混乱しています。これで、いくつかのJavascriptファイルを使用してさまざまなタスクを実行するアプリケーションができました。今、私はJavascript bundler を使用して、すべてのファイルを結合および縮小しています。そのため、実行時にはapp.min.jsファイルは1つしかありません。現在、 Requirejs は、実行時にモジュールまたはファイルをロードするために使用されます。だから、質問はすでに1つのファイルにすべてのものがある場合、私はrequirejsが必要ですか?または、requirejsやbundlerを使用できるユースケースシナリオとは何ですか?

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

74
kunjee

これは、多くの熟練したJavaScript開発者の間で激しく争われている問題です。他の多くの言語には、「コンパイル」フェーズがあり、プログラム全体がデプロイ用にバンドルされています(JBossの.WARファイルが思い浮かびます)。従来のバックグラウンドを持つプログラマーは、このアプローチを好むことがよくあります。

Javascriptは近年、このような成長を遂げており、正確なベストプラクティスをグラフ化することは困難ですが、Javascriptのより機能的な性質を評価する人は、モジュール読み込みアプローチ(require.jsなど)を好むことがよくあります。

Frame.js を書きました。これはrequire.jsと同じように機能するので、モジュールローダーアプローチに偏っています。

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

スクリプトを単一のファイルにパックすることを主張するほとんどの人は、それがより多くの圧縮を可能にし、したがってより効率的であると信じています。 (1)モジュールのロード時間がセッション全体に分散している、(2)個々のモジュールをほぼ同じ割合で圧縮できる、(3)個々のモジュールをキャッシュできるサーバーとルーターを別々に使用します。(4)スクリプトが必要な場合にのみスクリプトをロードすることにより、最終的に一部のユーザーのコードを減らし、全体的に多くのコードをロードできます。

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

28
BishopZ

一般的に、開発中は読み込みフォームでRequireJSのみを使用します。サイトが完成し、展開の準備ができたら、コードを縮小します。ここでの利点は、RequireJSが依存関係を正確に把握しているため、正しい順序でコードを簡単に縮小できることです。 RequireJS Webサイト での内容は次のとおりです。

開発が完了し、エンドユーザー向けにコードをデプロイしたい場合は、オプティマイザーを使用してJavaScriptファイルを結合して縮小できます。上記の例では、main.jsとhelper/util.jsを1つのファイルに結合し、結果を縮小できます。

48
Matt Greer

アプリケーションによって異なります。控えめなjavascript(最小化された100 kb未満)のみでサーバー側アプリを作成している場合は、完全なバンドルに進みますが、おそらく大丈夫でしょう。

しかし、javascriptアプリを作成していて、その中に大量のコードがある場合、ニーズは異なるでしょう。

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

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

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

すぐにすべてを含めると、1メガバイトのjavascriptを超えることがあります。これは非常識で、最初の起動が許容できないほど遅くなります。

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

しかし、2番目のカテゴリは、より重要なものを最初に読み込むという点で、最初のカテゴリよりもインテリジェントです。たとえば、Wikiを表示している場合、カラーピッカーをロードする前にWikiをロードします。

11
Harry