首頁 > web前端 > js教程 > 主體

Angular CLI建置與Serve使用詳解

php中世界最好的语言
發布: 2018-05-03 14:25:50
原創
1660 人瀏覽過

這次為大家帶來Angular CLI構建與Serve使用詳解,Angular CLI構建與Serve使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

Build.

Build主要會做以下動作:

  1. #編譯專案檔並輸出到某個目錄

  2. Build targets決定了輸出的結果

  3. bundling 打包

  4. ## 生產環境的build也會進行uglify和tree-shaking(把沒用的程式碼去掉)

ng build.##可以先看幫助:

ng build --help
登入後複製

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

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

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

    #inline.bundle.js 這是webpack的執行時間.
  1. #main.bundle.js 就是程式碼.
  2. pollyfills.bundle.js 就是瀏覽器的Pollyfills.
  3. styles. bundle.js 樣式
  4. vendor.bundle.js 是angular和第三方函式庫
  5. 可以使用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進行分析, 首先

安裝

它:

然後執行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的對比.

##去掉無用程式碼AOT#不是Bundling打包#是--build-optimizer--named-chunks--output-hashing

下面命令都是针对开发时的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
登入後複製

其它常用的参数还有:

  1. --sourcemap -sm 生成source map

  2. --aot Ahead of Time编译

  3. --watch -w Watch并rebuild

  4. --environment -e Build环境

  5. --target -t Build target

  6. --dev 表示dev env和target

  7. --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. 已经一直在用了, 下面看看它常用的参数:

  1. --open -o 打开默认浏览器

  2. --port -p 端口

  3. --live-reload -lr 发生变化时重新加载网页(默认开启的)

  4. --ssl 使用https

  5. --proxy-config -pc 代理配置

  6. --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文件:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular CLI进行单元测试和E2E测试步骤详解

Vue中computed与methods使用区别

ng build

#ng build --prod

Environment

environment.ts

environment..prod.ts

#快取

只快取css裡引用的圖片

所有build的檔案

source maps

產生

不產生

如何處理css

#全域css輸出到js檔案

產生的是css檔

uglify

#不

##是

Tree-Shaking

#不去掉無用程式碼

##是

#是(和AOT以及Angular5)

#是

#media

所有

以上是Angular CLI建置與Serve使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!