web-dev-qa-db-fra.com

Charger des bibliothèques externes à partir de CDN avec angular-cli

Je souhaite utiliser angular-cli pour créer une application qui regroupe mon code d'application mais n'inclut pas le cadre Angular2 ou d'autres grandes bibliothèques JavaScript externes dans le code fourni. Je voudrais charger ces bibliothèques à partir d'un CDN lorsque la page se charge. Y a-t-il un moyen de faire cela?

De plus, existe-t-il un moyen de le faire tout en préservant les avantages d'une build locale où seules les parties du framework Angular2 que j'utilise sont chargées?

J'ai vu cette question, mais c'était pour SystemJS et je ne pense pas qu'elle s'applique à Angular-cli: Comment charger angular2 en utilisant CDN et SystemJS

javascriptangularangular-cli
26
Chris

Il vous suffit d'ajouter les balises <script src=""> Appropriées pointant vers le CDN dans le fichier index.html. N'oubliez pas de supprimer les fichiers .js de angular-cli.json Afin qu'ils ne soient pas fournis avec l'application.

Actuellement, vous ne pouvez pas le faire pour les fichiers Angular 2 js eux-mêmes, ils sont automatiquement fournis avec votre application. Bien que les dernières mises à jour permettent aux serveurs Web et aux navigateurs de mettre en cache les fichiers du fournisseur, donc ils ne sont pas téléchargés à nouveau sur chaque visiteur de votre application, mais uniquement lorsque le hachage change.

12
Alexander Ciesielski

Lors de la création d'une application avec Angular, version 2 ou supérieure, utilise un système de génération qui n'inclut que les parties de la plate-forme Angular que vous utilisez. Les modèles peuvent être compilés au moment de la génération, ce qui permet au processus de génération de supprimez le compilateur de modèles de votre charge utile groupée. Enfin, le processus de construction effectue une arborescence à l'aide d'une analyse statique de votre code, ce qui supprime davantage du paquet de charge utile les parties inutilisées de la plate-forme.

Si vous fournissez Angular à partir d'un CDN, il faudrait que ce soit l'évier de la cuisine, la plateforme entière. Ce serait énorme et au détriment de votre application.

Vous êtes beaucoup mieux en permettant de regrouper angulairement-cli les parties de la plateforme dont vous avez besoin. À mesure que le plug-in d'arborescence WebPack s'améliore, la taille de vos bundles diminue.

8
Martin

Je voudrais ajouter votre application entière à un CDN tel que Akamai . Par exemple (selon la structure de votre application), vous pouvez mettre en cache des fichiers tels que ceux de la liste ci-dessous ...

  • index.html
  • Élément de liste
  • application.css
  • application.js
  • templates.js
  • vendors.css
  • vendors.js

Cela donnerait des performances encore meilleures que la simple mise en cache des fichiers de framework Angular sur le CDN).

4
Ben Cameron