Angular 打包問題

ng build ，index.html 檔案消失

Warning: bundle initial exceeded maximum budget. Budget 10.00 MB was not met by 11.61 MB with a total of 21.61 MB.

Error: bundle initial exceeded maximum budget. Budget 10.00 MB was not met by 11.61 MB with a total of 21.61 MB.

修正方式:

   {
    "projects": {
      "{name}": {
        "architect": {
          "build": {
            "configurations": {
              "production": {
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "10mb",
                    "maximumError": "50mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "10mb",
                    "maximumError": "10mb"
                  }
                ]
              }
            }
          }
        }
      }
    }
  }

它可以幫助開發者設定應用程式的不同方面，如大小、性能和響應性的限制。這就像為你的程式碼設定邊界，防止它變得過大或過慢。

在你提供的配置中，”type”: “initial”的預算會檢查應用程式初始加載時所需的所有資源（例如：JavaScript和CSS）的大小。
如果超過”maximumWarning”的值，Angular會在控制台中顯示警告。
如果超過”maximumError”的值，則會導致構建失敗。

另一個預算”type”: “anyComponentStyle”，則會檢查任何單個組件樣式的大小。

主要是因為網站的加載速度對於用戶體驗非常重要。
研究顯示，人們對於等待網站加載的耐心非常有限。
為了保持用戶的參與度並防止他們因為加載速度慢而離開，我們需要提高Angular應用程式的速度和性能。
這就是Angular budgets的作用，它就像一個嚴格的老師，確保一切都在檢查之下。
這樣，開發者就可以監控並控制這些包的大小，防止它們變得過大並拖慢應用程式。
同時，隨著應用程式的增長和演變，它可能會變得更大，影響其性能。
有了Angular budgets，你就可以像偵探一樣，不斷追蹤你的應用程式的大小和性能指標。
如果它開始出問題，你將會發現並採取必要的措施來使其恢復正常1。