質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

10680閲覧

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

tarotarosu

総合スコア114

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1グッド

0クリップ

投稿2017/03/01 05:02

###前提・実現したいこと
最近のフロントエンド開発の流行りに乗っかり、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を見てみると下図のようになっていました。

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

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

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

  • 色々なライブラリやプラグインを使いたくなった場合、それらをnpm installしエントリポイントでrequireして使用するのは普通のことなのか。また、それらに伴うjsファイルサイズの肥大化は仕方ないことなのか。(使用するライブラリ、プラグインが増えてきた場合どうするのか)

  • 画像の間隔の原因は何なのか(質問のタイトルとはあまり関係ないとは思いますが)。

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

sii_side👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

shuntksh

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

逆説的ではありますが、個人的には「そういうロード負荷が問題とならない」場面で使うものだと考えています。たとえば、以下の様なものであればロード時間は問題となりません。

  • トップページのログイン情報を入力している間にJavaScriptロードを済ませて、中に入ればSPAでリロード自体発生しない、というような、半分アプリのようなサイト
  • Electronなど、ブラウザ外

そうでない、「コンテンツメインのサイト」に関しては、JavaScriptを使わなくてもメインコンテンツは表現可能ですし、SEOの観点で言っても複雑なJavaScriptに依存させるのはデメリットが大きいと思います。

もっとも、「CSSまでWebpackに組み込んで、JavaScriptと並べて扱う」というのはかなり無理がある構造かなと思います(Qiitaでそのあたりに触れた記事)。

投稿2017/03/01 06:23

maisumakun

総合スコア145484

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問