使用Angular CLI進行Build (構建) 和 Serve

solenovex發表於2018-03-20
AngularUI

第一篇文章是: "使用angular cli生成angular5專案" : http://www.cnblogs.com/cgzl/p/8594571.html

第二篇文章是: "使用angular cli從藍本生成程式碼" : http://www.cnblogs.com/cgzl/p/8605464.html

第三篇文章是: "使用Angular CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html

 

Build.

Build主要會做以下動作:

  • 編譯專案檔案並輸出到某個目錄
  • Build targets決定了輸出的結果
  • bundling 打包
  • 生產環境的build還會進行uglify和tree-shaking(把沒用的程式碼去掉)

ng build.

可以先看幫助:

ng build --help

針對開發環境, 就是用命令 ng build.

預設情況下, 它的輸出目錄在.angular-cli.json檔案裡ourDir屬性配置的, 預設是/dist目錄.

build之後會看見dist裡面有這些檔案:

  • inline.bundle.js 這是webpack的執行時.
  • main.bundle.js 就是程式程式碼.
  • pollyfills.bundle.js 就是瀏覽器的Pollyfills.
  • styles.bundle.js 樣式
  • vendor.bundle.js 是angular和第三方庫

可以使用source-map-explorer來分析依賴, 並且檢視哪些模組和類在bundle裡面.

首先修改上一個例子中的程式碼:

 

執行ng build:

可以看到生成了這些檔案.

把dist裡面的index.html格式化一下看看:

可以看到它引用了生成的5個js檔案.

開啟main.bundle.js可以看到我寫的程式碼:

下面執行程式: ng serve -o:

可以看到在ng serve的時候, 載入了上述的檔案.

因為ng build是開發時的build, 所以沒有做任何優化, 檔案挺大的.

這時看一下檔案目錄, 並沒有dist目錄:

那麼這些檔案是怎麼被serve的呢?

這是因為, 這時候webpack是在記憶體中進行的serve.

下面使用source-map-explorer進行分析, 首先安裝它:

npm install --save-dev source-map-explorer

 

然後執行 ng build, 再執行:

.\node_modules\.bin\source-map-explorer dist\main.bundle.js

 

結果會生成這個圖形:

再看看vendor.bundle的情況:

.\node_modules\.bin\source-map-explorer dist\vendor.bundle.js

 

這裡面東西就比較多了.

 

Build Targets和Environment.

Environment是指採用哪一個環境檔案:

而Targets則是用來決定專案檔案是如何被優化的.

看一下開發和生產build的對比.

 

ng build

ng build --prod

Environment

environment.ts

environment..prod.ts

快取

只快取css裡引用的圖片

所有build的檔案

source maps

生成　

不生成

如何處理css

全域性css輸出到js檔案

生成的是css檔案

uglify

不

是

Tree-Shaking

不去掉無用程式碼

去掉無用程式碼

AOT

不

是

Bundling打包 

是

是

--build-optimizer

否

是(和AOT以及Angular5)

--named-chunks

是

否

--output-hashing

media

所有

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面命令都是針對開發時的build, 它們的作用是一樣的:

ng build
ng build --dev
ng build --dev -e=dev
ng build --target=development --environment=dev

 

下面則是生產build:

ng build --prod
ng build --prod -e=prod
ng build --target=production --environment=prod

 

其它常用的引數還有:

  • --sourcemap -sm 生成source map
  • --aot Ahead of Time編譯
  • --watch -w Watch並rebuild
  • --environment -e Build環境
  • --target -t Build target
  • --dev 表示dev env和target
  • --prod 表示prod env和target

 

Production Build.

先使用--aot:

ng build --aot

 

使用aot之後可以看到 vendor.bundle的大小降了很多, 只有1.5m左右了.

執行aot會去掉一些程式執行不需要的程式碼, 例如angular的compiler這時就不在build輸出的檔案裡了(可以使用source-map-explorer檢視).

試試生產環境:

ng build --prod

 

可以看到所有的檔案都非常小了, 並且沒有vendor了(因為prod下--build-optimizer起作用所以vendor沒有了, 但可以使用--vendor-chunk true給弄出來).

 

Serve.

ng serve. 已經一直在用了, 下面看看它常用的引數:

  • --open -o 開啟預設瀏覽器
  • --port -p 埠
  • --live-reload -lr 發生變化時重新載入網頁(預設開啟的)
  • --ssl 使用https
  • --proxy-config -pc 代理配置
  • --prod 在記憶體中serve 生產模式build的檔案

試試 --prod:

ng serve --prod

 

通過檔案大小可以看出確實是prod build的.

 

ng eject.

為專案生成webpack配置和指令碼.

執行該命令試試:

看看有哪些變化:

.angular-cli.json:

package.json:

命令指令碼都變了

還多出來一個webpack.config.js檔案:

為什麼要這麼做呢?

可以對專案更深入的配置....

這時執行程式就是 npm start了.

我還是把reject恢復回去吧, 使用git來恢復吧.

 

如果需要Serve 其他js/css/assets檔案:

放在.angular-cli.json就行, 例如jquery就應該放在scripts裡面.

 

相關文章