ng build --prod 加上 aot, build-optimizer參數的差別


#1

請問兩種 ng build 方式的差別及原因,謝謝!

Angular CLI: 7.1.0

問題描述

專案建置執行以下指令後,發現後者(方法 2) 建置出的應用, http interceptor (以下稱AInterceptor) 作用消失了。
因為 AInterceptor 有針對網址做一些處理,所以瀏覽後從開發者工具 Network 明顯看到網址沒有被處理過。

(方法 1)
ng build --prod --source-map --aot=false --build-optimizer=false --base-href
(方法 2)
ng build --prod --source-map --base-href

其他疑點 文件寫這兩個參數 default 都是 false 怎麼會有差別呢?

有點冗長的 import stack

AInterceptor 在 AModule 提供

@NgModule({ 略 })
export class AModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: AModule,
      providers: [{ provide: HTTP_INTERCEPTORS, useClass: AInterceptor, multi: true }]
    };
  }
}

AModule 被 BModule 引用

@NgModule({
  imports: [    AModule.forRoot()      ],
})
export class BModule {}

BModule 被 CModule 引用

@NgModule({
  imports: [ BModule ]
})
export class CModule {}

CModule 打包成 library 被現在建置的專案引用

@NgModule({
  imports: [  CModule  ],
})
export class AppModule{}

#2

ng build --prod 時,aot 與 build-optimizer 都會設定為 true.
--build-optimizer=false 問題應該是這一個,http_interceptors 被 tree-shaking 掉了


#3

謝謝!請問要怎麼不讓它被 tree-shaking 甩掉呢?


#4

我沒有遇到妳說的問題,要提供簡單的測試 repo 程式碼嗎?


#5

重新 ng new 試了一個簡單的例子,也沒有遇到這個問題 (汗)。

請問有debug / log 能在看出原本專案build --prod 的 tree-shaking 過程嗎? 謝謝!


#6

在建置指令後面再加上 ---verbose 就可以看到更多資訊


#7

看到原專案有這行

WARNING in Terser Plugin: Dropping unused variable my_lib_AModule  [main.xxxx.js]

只是不曉得為什麼會是 unused … Orz


#8

terser 就是取代之前的 uglify ,主要就是 minification 跟 DCE 的


#9

實驗了一陣子,似乎是用到 index.ts barrel 寫法 導致ng build --prod 有問題

看到幾個已經 close 的 issue 如 1 2

我的狀況是這個問題還是有,但不用 barrel 大概可以解