# Angular 效能優化 LazyLoading/PreloadAllModules
###### tags: `Angular`

## [延遲載入 Lazy-loading](https://angular.io/guide/lazy-loading-ngmodules)

### 簡介
針對頁面可設置個別的 Module，讓其進入該頁面的時候才 Loading 所需要的東西，可以避免在進入第一個頁面就需要 Loading 所有東西
( 將原本在 main.js 中的內容分散成各 js，避免 main.js loading 太重 )

### LazyLoading 的實作

* 建立完整的 Component 搭配 Routing、Module 檔案、並在 app-routing.module.ts 的 routes 中新增一組 route

ng generate module /Components/test --route test --module app.module

* 建立出來的 module

* 建立出來的 routing

* 如果是開發中途想改成 LazyLoading
會出現異常
<span style="color:red">A merge conflicted on path "/src/app/Components/wijmo-chart/wijmo-chart.component.html".</span>

故將路徑先改為在 app 底下建立，在另外將產出的 module、routing 複製至目前的 Component 也行

ng generate module /test --route test --module app.module

[實作參考-Angular Lazy Loading — Not Only For The Lazy](https://massivepixel.io/blog/angular-lazy-loading/)

### 太多共用的 Module 不想每次都複製貼上
1. 建一個 ts 檔， export 一些共用的設定吧

export const moduleCommonSet = {
  imports: [
    // A Module
    // B Module
    // C Module
  ]
}


2. SharedModule
[官方文件](https://angular.io/guide/sharing-ngmodules)
[stackoverflow-Creating Shared Module across lazy loaded routes](https://stackoverflow.com/a/65006591)

### 延伸議題
畢竟有可能有很多頁面的系統，不知道是不是可以相似的多個頁面共用同一個 Module 呢？不過這樣 Routing 怎麼辦？還是說頁面本身就應該設計好，都有主路由配子路由？

### 其他
※除了 appModule 之外都用 [CommonModule](https://angular.io/api/common/CommonModule)
CommonModule 是從 BrowserModule 重新導出所有基本的 Angular 指令和管道

## [預先背景載入-PreloadAllModules](https://angular.io/api/router/PreloadAllModules)

### 簡介
預載功能，搭配 LazyLoading 服用
載完第一個頁面後，開始下載 LazyLoading 的 Module，這樣可以減少使用者的 Loading 體感，也可以自訂一些讀取策略

### 實作
app.routing.ts
`RouterModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})`

### 參考
[[Angular] Preloading策略](https://blog.kevinyang.net/2017/01/21/angular2-preloading/)

## dist分析包 Webpack Bundle Analyzer ( angular 用法 )

### 簡介
分析 bulid 出來的 package，會依照 package 的 size 呈現，能清楚的看到那些模組體積過大，指上方塊時也能清楚的看見其資料大小


### 實作
1. 在 Project 中安裝
`npm install --save-dev webpack-bundle-analyzer`
3. 在 package.json 中 script 加上指令
`"bundle-report": "webpack-bundle-analyzer dist/stats.json"`
3. build project
`ng build --stats-json`
4. 啟動分析頁面服務
`npm run bundle-report`

### 參考
* [Angular main.js file large size](https://stackoverflow.com/q/55803291)
* [Analyzing bundle size with the Angular CLI and Webpack](https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack)