angular.js - angular有没有可以本地构建静态代码的工具

Question

由于angular中使用了大量自定义标签，所有会在浏览器端做很多的计算工作，有没有一种工具可以将这件事情在发布前先编译好，这样就可以避免大部分浏览器的计算工作，有这样的工具吗？

Answer 1

En fait, c'est un vaste sujet, mais je ne vais pas l'aborder ici car c'est trop laborieux - pour comprendre tous les détails, il ne suffit pas de connaître Angular.

Pour résumer les points clés, je dirai deux points :

1. La pré-compilation des modèles n'est pas difficile (il s'agit ici de mettre en cache des modèles statiques dans $templateCache, afin que les modèles soient directement chargés en mémoire lors du chargement de l'application), mais c'est sérieux pour Angular Pour un framework qui repose sur la liaison de données , la charge de travail de compilation de modèles ne vaut pas la peine d'être mentionnée. À moins que votre projet soit extrêmement volumineux et qu'il y ait trop de modèles à gérer - mais ce qui est plus grave en ce moment est la perte de temps de pré-compilation des modèles lors du développement local - la modularisation d'applications géantes est donc la bonne voie ; le point. Des instructions comme ng-repeat seront notre objectif de "réduire la charge sur le navigateur", c'est-à-dire d'étendre ces instructions et de remplir le DOM avant que le navigateur ne se charge. Les instructions comme ng-if ne peuvent pas être prétraitées, car elles s'appuient souvent sur elles ; "liaison de données".
   Laissez-moi vous donner un exemple. Par exemple, il y a une section sur la page contrôlée par ng-if Elle est jugée en fonction du fait que l'utilisateur actuel dispose d'autorisations. Cependant, le statut de l'utilisateur doit attendre l'utilisateur. pour vous connecter (ou d'autres conditions prédéfinies). Obtenir - Comment prétraiter ng-if en dehors du navigateur ? Cela impliquera des opérations DOM et affectera également les performances du navigateur. Voulez-vous dire un prétraitement ou non ? Si toutes ces balises nécessitent un compromis pour décider de prétraiter ou non, alors le coût est trop élevé, il est donc préférable de ne pas utiliser Angular. Angular ne peut pas être complètement statique (d'ailleurs, le Object.observe() d'ESNext sera la clé de la solution), alors que le semi-statique est possible, mais souvent pas en raison des performances du navigateur.

2. En fait, il faut croire que les performances des navigateurs modernes sont très fortes. Le rendu côté client n'est pas le "goulot d'étranglement des performances" que beaucoup de gens imaginent. De nombreuses tentatives de rendu côté serveur (pour Angular) sont principalement destinées. recherche. Optimisation du moteur plutôt que amélioration des performances. Laissez-moi vous donner quelques mots-clés à rechercher. C'est une bonne occasion d'apprendre (utilisez un moteur de recherche anglais, il n'y a pas de résultats utiles en chinois) :

   • rendu côté serveur
   • rendu dom côté serveur
   • nœud
   • angulaire
   • pré-rendu
   • pré-compiler
   • phantomjs/casperjs
   • bibliothèques js isomorphes
     Vous pouvez diviser et combiner ces mots-clés pour explorer le contenu connexe. De nombreux outils/pratiques/tutoriels/discussions vous attendent.

Pour résumer. Pour les applications JS basées principalement sur la « liaison de données » (comme Angular), parce que la prise en charge actuelle du langage et de l'environnement n'est pas en place (comme ce qui précède Object.observe(), etc.), il est impossible de réaliser une intégration complète au niveau Niveau DOM. Précompilé ou statique. Il est possible de prétraiter des parties du DOM d'autres manières avant d'entrer dans le navigateur, mais cela n'aura pas un impact énorme sur l'amélioration globale des performances de l'application ou/et sur l'amélioration des performances du navigateur, ni sur le coût de mise en œuvre de ces prétraitements. en lui-même n'est pas petit ; à moins que vous ne fassiez une demande avec des performances extrêmement strictes (comme Taobao ?), c'est toujours une décision.

Answer 2

Du point de vue de l'optimisation des moteurs de recherche, cela a également du sens. Les outils prêts à l'emploi adaptés à AngularJS incluent

• prerender.io

• serveur-angularjs

L'île Midway de Taobao devrait être un point de départ similaire