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

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

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

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

JavaScript

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

Bootstrap

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

解決済

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

tarotarosu
tarotarosu

総合スコア114

ECMAScript

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

JavaScript

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

Bootstrap

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

2回答

1評価

0クリップ

9158閲覧

投稿2017/03/01 05:02

###前提・実現したいこと
最近のフロントエンド開発の流行りに乗っかり、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ファイルサイズの肥大化は仕方ないことなのか。(使用するライブラリ、プラグインが増えてきた場合どうするのか)

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

ECMAScript

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

JavaScript

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

Bootstrap

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