質問: { 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内で、 ``` 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ファイルでは、内でこのファイルを読み込まなければならないが、ファイルサイズが大きすぎるため初期表示にちょっと時間がかかる、 ということが考えられるのではないでしょうか? 現にこのような方法でjsファイルを一つにまとめた際、chromeのデベロッパーツールのnetworkを見てみると下図のようになっていました。 ![デベロッパーツールのNetworkの状態](https://teratail.storage.googleapis.com/uploads/contributed_images/fb2f8a9feee412aa96ea04e25a8dab94.png) このような方法でjsファイルをまとめたからかはわかりませんが、50msでapp.jsのダウンロードが終わってから、約150msまで何も行われていません。 そして、その後の長いグレーのバーはBootstrapのフォント等をbase64形式にしたものだと思います。 networkの見方があっているか分かりませんが、すごく無駄が多いような気がします。 長くなりましたが質問をまとめますと、 * 色々なライブラリやプラグインを使いたくなった場合、それらをnpm installしエントリポイントでrequireして使用するのは普通のことなのか。また、それらに伴うjsファイルサイズの肥大化は仕方ないことなのか。(使用するライブラリ、プラグインが増えてきた場合どうするのか) * 画像の間隔の原因は何なのか(質問のタイトルとはあまり関係ないとは思いますが)。 以上、何かご回答がいただけると助かります_(._.)_
回答: WebpackでもCommonsChunksPluginを使うことで複数のChunkに分割することができますよ。以下のマニュアルが参考になると思います: あとWebpack 2.xからTree Shakingの機能が追加されて不要なmoduleがchunkから除外されるようになりました。なのできちんと意識的に読み込むmoduleを絞れば、そこまでbloatすることは無いと思います。 気になる場合は`webpack-bundle-analyzer`というツールで、どのモジュールごとのchunkに占める割合を分析可能です。 これらの設定を行うことで、基本的には(よほど不用意に無駄なモジュールをimportしないかぎり、あと間違ってdevelopment向けにバンドルしないかぎり)影響は抑えられると考えています。 ただ基本的にはmaisumakunさんがご指摘されているように、SPAのように最初に読み込んで、あとはJavaScriptがフロントで主体となってViewを動的に生成するような用途で使うのが一番向いているとは思います。(生成されるChunkファイルにハッシュを付けて、クライアント側でのキャッシュを制御することが多いですし)