使用angular-cli从CDN加载外部库

Question

我想使用angular-cli构建一个捆绑我的应用程序代码的应用程序，但不包括捆绑代码中的Angular2框架或其他大型外部JavaScript库。我想在页面加载时从CDN加载这些库。有没有办法做到这一点？

另外，有没有办法在保留本地构建的好处的同时只使用我正在使用的Angular2框架的部分加载？

我看到了这个问题，但它适用于SystemJS，我认为它不适用于Angular-cli：How to load angular2 using CDN and SystemJS

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

我会将您的整个应用添加到CDN，例如Akamai。例如（取决于您的应用程序的结构），您可以缓存文件，例如下面列表中的文件......

• index.html
• 列表项
• application.css
• 的application.js
• templates.js
• vendors.css
• vendors.js

这比仅仅缓存CDN上的Angular框架文件提供了更好的性能。