快捷導(dǎo)航

Angular應(yīng)用打包和部署實(shí)現(xiàn)過(guò)程詳解

更新時(shí)間：2023年08月01日 09:10:04 作者：品品下午茶

這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實(shí)現(xiàn)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

應(yīng)用打包

對(duì) Angular 應(yīng)用打包，只需要執(zhí)行下面的命令即可：

ng build

命令輸出結(jié)果如下：

chunk {main} main.js, main.js.map (main) 22.4 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.22 MB [initial] [rendered]
Date: 2022-06-05T08:13:29.036Z - Hash: 320a98b795509f74dda8 - Time: 6897ms

構(gòu)建過(guò)程會(huì)啟動(dòng) Angular 編譯器，主要收集應(yīng)用中的所有 TypeScript 源文件，轉(zhuǎn)換為 JavaScript 文件。在默認(rèn)配置下，編譯器會(huì)將 JavaScript 文件輸出到 dist 文件夾。

開發(fā)模式構(gòu)建

輸出文件夾主要包含下列文件:

favicon.ico: 應(yīng)用的圖標(biāo)，如顯示在瀏覽器標(biāo)題欄上
index.html: 應(yīng)用的主 HTML 文件
main.js: 包含了開發(fā)的應(yīng)用代碼
polyfills.js: 提供遺留瀏覽器的兼容支持
runtime.js: 包含了 Angular CLI 相關(guān)的代碼，能夠運(yùn)行其他文件
styles.js: 包含了應(yīng)用的全局樣式
vendor.js: 包含了 Angular 框架和其他第三方類庫(kù)

此外，dist 文件夾還包括了 .map 結(jié)尾的文件，主要用于調(diào)試目的。

在構(gòu)建生成的 index.html 文件中，引用了編譯器輸出的 JavaScript 文件：

<!doctype html>
<html lang=“en”>
<head>
  <meta charset="utf-8”>
  <title>BookStore</title>
  <base href=“/“>
  <meta name="viewport" content="width=device-width, initial-scale=1”>
  <link rel="icon" type="image/x-icon" href=“favicon.ico”>
</head>
<body>
  <app-root></app-root>
  <script src="runtime.js" defer></script>
  <script src="polyfills.js" defer></script>
  <script src="styles.js" defer></script>
  <script src="vendor.js" defer></script>
  <script src="main.js" defer></script>
</body>
</html>

Angular CLI 構(gòu)建命令可以在兩種模式下運(yùn)行: 開發(fā)模式和生產(chǎn)模式。默認(rèn)使用開發(fā)模式，如直接運(yùn)行 ng build。如果選擇生產(chǎn)模式，需要添加命令選項(xiàng)：

ng build --configuration=production

或者使用快捷命令選項(xiàng)：

ng build —prod

使用生產(chǎn)模式構(gòu)建應(yīng)用，輸出文件如下所示：

生產(chǎn)模式構(gòu)建

與使用開發(fā)模式構(gòu)建應(yīng)用不同的是，輸出的文件不再包含 .map 文件，不需要對(duì)生產(chǎn)代碼進(jìn)行調(diào)試。另外，輸出的 JavaScript 文件和 CSS 文件，都包含了一個(gè)哈希值，可以讓瀏覽器緩存的文件盡快失效，讓新文件發(fā)揮作用。

限制包大小

隨著應(yīng)用功能的增多，構(gòu)建應(yīng)用的輸出文件會(huì)越來(lái)越大。我們可以在 angular.json 文件中增加一些配置項(xiàng)，限制應(yīng)用包文件的大小。例如：

  "budgets": [
    {
      "type": “initial”,
      "maximumWarning": “2mb”,
      "maximumError": “5mb”
    },
    {
      "type": “anyComponentStyle”,
      "maximumWarning": “6kb”,
      "maximumError": “10kb”
    }
  ]

上述配置，都是 Angular CLI 命令創(chuàng)建的默認(rèn)配置。我們可以自定義不同類型的配置，也可以按百分比限制文件大小。

更多的配置選項(xiàng)，可以參考官方文檔。