する質問をすることでしか得られない、回答やアドバイスがある。111前提・実現したいこと最近のフロントエンド開発の流行りに乗っかり、Webpackを試験的に使用しています。Webpackを使用することのメリットとして、JavaScriptのコードをモジュール単位で分割してもrequireを使って呼び出すことで、最終的に一つのjsファイルにまとめることで依存関係を解決できるということや、loaderを使ってcssファイルや画像も取り扱うことができるということだと考えています(間違っていたらすみません...)。installで必要なものをインストールし、以下のようなwebpack.config.jsを記述しました。'source-map',};そして、Bootstrapを使用するために、app.js内で、require('bootstrap/dist/css/bootstrap.min.css');require('bootstrap/dist/js/bootstrap.min.js');と記述し、Backbone.jsやBootstrapを使用できるようにしました。そこで思ったのですが、もっと色々なライブラリやプラグインを使用したくなったとします。installし、app.js内でrequireすると思います。このようなことをしていると一つのjsファイルのサイズがどんどん肥大化していきます。これは普通のことなのでしょうか?例えば、Bootstrapやその他CSSはdom構築前に読み込みたい場合、このように一つにまとめたjsファイルでは、<head>内でこのファイルを読み込まなければならないが、ファイルサイズが大きすぎるため初期表示にちょっと時間がかかる、ということが考えられるのではないでしょうか?現にこのような方法でjsファイルを一つにまとめた際、chromeのデベロッパーツールのnetworkを見てみると下図のようになっていました。このような方法でjsファイルをまとめたからかはわかりませんが、50msでapp.jsのダウンロードが終わってから、約150msまで何も行われていません。その後の長いグレーのバーはBootstrapのフォント等をbase64形式にしたものだと思います。networkの見方があっているか分かりませんが、すごく無駄が多いような気がします。installしエントリポイントでrequireして使用するのは普通のことなのか。それらに伴うjsファイルサイズの肥大化は仕方ないことなのか。(使用するライブラリ、プラグインが増えてきた場合どうするのか)画像の間隔の原因は何なのか(質問のタイトルとはあまり関係ないとは思いますが)。以上、何かご回答がいただけると助かります_(._.)_attachmentクリップ0気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。件sort評価が高い順sort新着順sort古い順linkcheckベストアンサー+3WebpackでもCommonsChunksPluginを使うことで複数のChunkに分割することができますよ。Shakingの機能が追加されて不要なmoduleがchunkから除外されるようになりました。意識的に読み込むmoduleを絞れば、そこまでbloatすることは無いと思います。気になる場合はwebpack-bundle-analyzerというツールで、どのモジュールごとのchunkに占める割合を分析可能です。これらの設定を行うことで、基本的には(よほど不用意に無駄なモジュールをimportしないかぎり、あと間違ってdevelopment向けにバンドルしないかぎり)影響は抑えられると考えています。基本的にはmaisumakunさんがご指摘されているように、SPAのように最初に読み込んで、あとはJavaScriptがフロントで主体となってViewを動的に生成するような用途で使うのが一番向いているとは思います。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。commentコメント投稿link+2逆説的ではありますが、個人的には「そういうロード負荷が問題とならない」場面で使うものだと考えています。以下の様なものであればロード時間は問題となりません。トップページのログイン情報を入力している間にJavaScriptロードを済ませて、中に入ればSPAでリロード自体発生しない、というような、半分アプリのようなサイトElectronなど、ブラウザ外そうでない、「コンテンツメインのサイト」に関しては、JavaScriptを使わなくてもメインコンテンツは表現可能ですし、SEOの観点で言っても複雑なJavaScriptに依存させるのはデメリットが大きいと思います。「CSSまでWebpackに組み込んで、JavaScriptと並べて扱う」というのはかなり無理がある構造かなと思います(Qiitaでそのあたりに触れた記事)。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。頂いたご意見への回答は行っておりません。