webpack4のoptimization.splitChunks

justcallmehide commented 5 years ago

スピードに関する地道な努力を来年にむけてぼちぼち初めていきます。スピードに銀の弾丸はありませんとのこと。

こういうイメージを作ってくれると一瞬で理解できる。日本語の作者は説明がうまい人が多い。(英語の理解力が乏しいだけかもだが...😭) https://qiita.com/soarflat/items/1b5aa7163c087a91877d

単純に共通項をまとめるって話なのだが、文字でだらだら説明されるとわからなかったり。

webpack.config.js これを追加

optimization: {
    splitChunks: {
      name: 'vendor',
      chunks: 'initial',
    }
  }

nameの'vendor'が共通ファイルの出力ファイル名にあたるので、自分はcommonにした。

ちなみに複数ファイルの出力はこのように書く outputのfilenameを[name]と書くと、entryの各キーがファイル名として吐き出される。今回のケースでいえば、home.bunlde.jsとcarouse.bundle.jsが出る。

entry: {
    home: __dirname + path['mobile'] + 'ts/home.ts',
    carousel: __dirname + path['mobile'] + 'ts/carousel.ts',
},
output: {
    filename: '[name].bundle.js',

optimization.splitChunksを有効にした出力

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f36393636372f63336638613138622d356334312d386235382d653534312d6437396461626534653338342e706e67

メリット

複数のエントリーポイントが1つの共通ファイルを利用するため、全体のファイルサイズが小さくなる共通ファイルなのでキャッシュを活用できる（1度読み込めば別ページに遷移しても読み込みが不要、共通ではないファイルだけ読み込めば良い）

kazukazu13 commented 5 years ago

Webpack自体に疎かったので勉強になります。現在htmlに直接書かれているJSを外に出したり、webpackでモジュール化しやすいような構成を念頭に入れてから書いていく必要があるのかなと思いました。

justcallmehide commented 5 years ago

webpack自体が依存関係にあるファイルを１つのファイルに出力できるっていって流行ったのに、今やそれをさらに分割して依存関係を保ったまま余計なファイルは読み込まないという次の流れになってますね。

cyber-s / blog

webpack4のoptimization.splitChunks #268

optimization.splitChunksを有効にした出力

メリット