# 素の Webpack に於ける split chunk

- splitting chunk と vendor chunk (共通ライブラリの切り出し)は表裏一体
- https://qiita.com/soarflat/items/1b5aa7163c087a91877d


# Angular に於ける split chunk 手段メモ
- `vendorChunk` オプションがデフォルト通り false になっている場合の効果検証から。


## 1. multi app + `vendorChunk` option
- angular-cli の枠組みでの手段
- multi app 下では、`angular.json` で multi app にするのが一番素直
- model, service の共通化とその後のメンテコストが少なければこれをやればいい

## 2. lazy loaded route (component)
- Angular の枠組みでの手段
- multi/single app 問わず、lazy loaded route (component) にしてしまうってのも一つの解。
- Angular 力が必要になり、「モジュール単位で清潔さを保つ」というmodel, service の共通化とはまた別のコストが発生するが、それ自体が促進されるのは良いことである。


## 3. Dynamic import
- ES6 Module の枠組みでの手段
- Webpack の仕組みを利用
- https://qiita.com/jkr_2255/items/8d3b58f993c8739e211

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/Tips/Angular/splitting%20chunk%20に関するメモ
- Permalink: https://tips.weseek.co.jp/5fb74a94a1ba4200489a4b0f
- Parent: [Angular](/65069da24603e7ff39a6b3d6.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 4 total
  - [AOTコンパイル](/5fb74a31a1ba4200489a4b04.md)
  - [EventEmitterはSubscribeしちゃだめです](/5fb745b1a1ba4200489a4a4e.md)
  - [RouterModule を import しているモジュールの注意点](/5fb74655a1ba4200489a4a61.md)
  - [コンポーネントのメソッドをブラウザの開発者コンソールから呼び出す](/5fb746c1a1ba4200489a4a76.md)
- Last updated: 2020-11-20T04:54:02.350Z by takuya
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5fb74a94a1ba4200489a4b0f