12
Nov
11/12に 第31回ZEALOT勉強会 を実施しました。
テーマは、「Web Frontend Part2」として JavaScript の module と bundle についてお話しいただきました。
これは第29回勉強会 の続きの話になります。
前回の復習
script に async や defer がついている時に HTMLのパース、JavaScriptのフェッチング、JavaScriptの実行順がどのようになるのか、ブラウザで表示される時の影響などを説明いただきました。大体の場合 defer をつけた方がいいよって結論でした。
moduleについて
module は特定の機能を実現するための塊ですが、デフォルトのJavaScript (以降 Classicと呼ぶ) にいろいろと機能が追加されているもののようです。
module を使った時の特徴について説明いただいたものをまとめます
- defer のように、HTML をパースしてから script が実行される。
- 'use strict' をつけた時のように文法チェックをする。(use strict mode となる)
- スコープがグローバルな Classic と違い、スコープが module 内に限定される（明示的に export する必要がある）。
- module ファイルが他の jsファイルを import する時に、jsファイル内の特定の関数のみ読み込むこともできる（メモリ使用量を軽減できる）
Classic は柔軟な書き方ができ、適当に書いても動いてくれる反面、スコープがグローバルであることも含めて色々問題があるようです（メモリリークとか）。 module を使うことで予測不能な動作を防ぐことができますし、メモリ管理の面でも良さそうです。
bundle について
後半は bundle についてでした。
bundling することでファイルを一つにすることができ以下のようなメリットがあるようです。
- Dependencyをまとめてダウンロードファイル数を減らす。（ネットワークのコネクション数を減らすことが時間短縮に重要）
- ファイルサイズを小さくしてくれる
- 不要なコード削除
- Uglify
メリットの ファイルサイズを小さくしてくれる について、module で必要な関数やデータのみをimport することで、さらに必要のない部分を削除して一つのファイルにまとめてくれるというのが素晴らしいと思いました。
bundle の使い所としては、開発時は使わない方が良く、Productionで使いましょう！とのこと。
ファイルのまとめ方については、一般ユーザーと管理者など機能を分けたいときなどに、bundleでまとめ方を変えて作っておくと良いそうです。
次回のテーマは
- コールバック地獄
- promiseチェーンの最適解 async/await
あたりをやりたいとのことです。
またまた面白そうな内容ですね！