第一篇文章是: "使用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里面.