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

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

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

javascript
1var webpack = require('webpack');
2
3module.exports = {
4  entry: {
5    app: './src/script/app.js'
6  },
7  output: {
8    path: __dirname + '/dist',
9    filename: '[name].js'
10  },
11  module: {
12    loaders: [
13      { test: /\.html$/, loader: 'html-loader' },
14      { test: /\.css$/, loader: 'style-loader!css-loader' },
15      { test: /\.svg$/, loader: 'url-loader?mimetype=image/svg+xml' },
16      { test: /\.woff$/, loader: 'url-loader?mimetype=application/font-woff' },
17      { test: /\.woff2$/, loader: 'url-loader?mimetype=application/font-woff' },
18      { test: /\.eot$/, loader: 'url-loader?mimetype=application/font-woff' },
19      { test: /\.ttf$/, loader: 'url-loader?mimetype=application/font-woff' },
20      { test: /\.png$/, loader: 'url-loader?mimetype=image/png' }
21    ]
22  },
23  plugins: [
24    new webpack.ProvidePlugin({
25      jQuery: "jquery",
26      $: "jquery",
27      _: "underscore",
28      Backbone: "backbone"
29    }),
30    new webpack.optimize.UglifyJsPlugin({
31      compress: {
32        warnings: false
33      }
34    })
35  ],
36  devtool: 'source-map',
37};

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

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

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

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

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

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

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

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

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

行動規範の内容に同意します

回答2件

ベストアンサー

WebpackでもCommonsChunksPluginを使うことで複数のChunkに分割することができますよ。以下のマニュアルが参考になると思います：

https://webpack.github.io/docs/code-splitting.html

あとWebpack 2.xからTree Shakingの機能が追加されて不要なmoduleがchunkから除外されるようになりました。なのできちんと意識的に読み込むmoduleを絞れば、そこまでbloatすることは無いと思います。

気になる場合はwebpack-bundle-analyzerというツールで、どのモジュールごとのchunkに占める割合を分析可能です。

これらの設定を行うことで、基本的には（よほど不用意に無駄なモジュールをimportしないかぎり、あと間違ってdevelopment向けにバンドルしないかぎり）影響は抑えられると考えています。

ただ基本的にはmaisumakunさんがご指摘されているように、SPAのように最初に読み込んで、あとはJavaScriptがフロントで主体となってViewを動的に生成するような用途で使うのが一番向いているとは思います。（生成されるChunkファイルにハッシュを付けて、クライアント側でのキャッシュを制御することが多いですし）

投稿2017/03/07 06:32