使用angular-cli從CDN加載外部庫

Question

我想使用angular-cli構建一個捆綁我的應用程序代碼的應用程序，但不包括捆綁代碼中的Angular2框架或其他大型外部JavaScript庫。 我想在頁面加載時從CDN加載這些庫。 有沒有辦法做到這一點？

另外，有沒有辦法在保留本地構建的好處的同時只使用我正在使用的Angular2框架的部分加載？

我看到了這個問題，但它適用於SystemJS，我不認為它適用於Angular-cli： 如何使用CDN和SystemJS加載angular2

Answer 1

您只需要將指向CDN的相應<script src="">標記添加到index.html文件中。 請記住從angular-cli.json刪除.js文件，這樣它們就不會與應用程序捆綁在一起。

目前，您不能為Angular 2 js文件本身做到這一點，它們會自動與您的應用程序捆綁在一起。 雖然最新的更新使Web服務器和瀏覽器能夠緩存供應商文件，但是它們不會在應用程序的每個訪問者上重新加載，而是僅在哈希更改時。

Answer 2

使用Angular（版本2或更高版本）創建應用程序時，使用僅包含您使用的Angular平台部分的構建系統。 可以在構建時編譯模板，允許構建過程從捆綁的有效負載中刪除模板編譯器。 最后，在您的代碼的靜態分析的幫助下，構建過程會發生樹木抖動，這進一步從有效負載包中刪除了平台的未使用部分。

如果您從CDN提供Angular，它將需要是廚房水槽，整個平台。 這將是巨大的，並且對您的應用程序造成損害。

你最好允許使用angular-cli捆綁你需要的平台部分。 隨着WebPack treeshaking插件的改進，您的包大小將變得更小。

Answer 3

我會把你的整個應用程序添加到像Akamai這樣的CDN。 例如（取決於您的應用程序的結構），您可以緩存文件，例如下面列表中的文件...

• 的index.html
• 項目清單
• application.css
• 的application.js
• templates.js
• vendors.css
• vendors.js

與僅緩存CDN上的Angular框架文件相比，這將提供更好的性能。