Webpackの導入によるjsファイルサイズの肥大化

###前提・実現したいこと
最近のフロントエンド開発の流行りに乗っかり、Webpackを試験的に使用しています。
Webpackを使用することのメリットとして、JavaScriptのコードをモジュール単位で分割してもrequireを使って呼び出すことで、最終的に一つのjsファイルにまとめることで依存関係を解決できるということや、
loaderを使ってcssファイルや画像も取り扱うことができるということだと考えています（間違っていたらすみません…）。

今、Backbone.jsやBootstrapを使って開発を行っているのですが、これらをWebpackでまとめるために、
npm installで必要なものをインストールし、以下のようなwebpack.config.jsを記述しました。

javascript
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/script/app.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
      { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' },
      { test: /\.png$/, loader: 'url-loader?mimetype=image/png' }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      _: "underscore",
      Backbone: "backbone"
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],
  devtool: 'source-map',
};

そして、Bootstrapを使用するために、app.js内で、

javascript
require('bootstrap/dist/css/bootstrap.min.css');
require('bootstrap/dist/js/bootstrap.min.js');

と記述し、Backbone.jsやBootstrapを使用できるようにしました。

そこで思ったのですが、もっと色々なライブラリやプラグインを使用したくなったとします。
そうすると今までと同様に、必要なライブラリやプラグインをnpm installし、app.js内でrequireすると思います。
このようなことをしていると一つのjsファイルのサイズがどんどん肥大化していきます。
これは普通のことなのでしょうか？
例えば、Bootstrapやその他CSSはdom構築前に読み込みたい場合、このように一つにまとめたjsファイルでは、<head>内でこのファイルを読み込まなければならないが、ファイルサイズが大きすぎるため初期表示にちょっと時間がかかる、
ということが考えられるのではないでしょうか？

現にこのような方法でjsファイルを一つにまとめた際、chromeのデベロッパーツールのnetworkを見てみると下図のようになっていました。

デベロッパーツールのNetworkの状態

このような方法でjsファイルをまとめたからかはわかりませんが、50msでapp.jsのダウンロードが終わってから、約150msまで何も行われていません。
そして、その後の長いグレーのバーはBootstrapのフォント等をbase64形式にしたものだと思います。
networkの見方があっているか分かりませんが、すごく無駄が多いような気がします。

長くなりましたが質問をまとめますと、

色々なライブラリやプラグインを使いたくなった場合、それらをnpm installしエントリポイントでrequireして使用するのは普通のことなのか。また、それらに伴うjsファイルサイズの肥大化は仕方ないことなのか。（使用するライブラリ、プラグインが増えてきた場合どうするのか）
画像の間隔の原因は何なのか（質問のタイトルとはあまり関係ないとは思いますが）。

以上、何かご回答がいただけると助かります_(..)