angulaire.js - Quelles sont les méthodes pour optimiser le chargement de la page d'accueil des applications monopage AngularJS?

Question

Dans les requêtes de pages Web traditionnelles, les données sont chargées dans le modèle côté serveur, qui peut être complété en une seule étape.

1. Télécharger HTML
2. Télécharger CSS/javascript
3. Rendu

Les applications d'une seule page doivent télécharger le framework avant de commencer à charger les données.

1. Télécharger HTML
2. Télécharger CSS/javascript
3. Télécharger les données/modèles
4. Rendu

Existe-t-il un moyen de réduire le nombre de requêtes ou de transformer ce chargement en série en une méthode parallèle ?

Answer 1

La solution parfaite est de restituer le premier écran côté serveur, mais Angular ne semble pas bon pour cela et je n'ai jamais vu de vraie solution

Un peu pire, au moins le serveur peut cracher les premières données d'écran de la page

La compilation et la fusion de certains autres modèles CSS et js de base devraient être les plus basiques

Answer 2

Utilisez l'outil gulp
Regroupez le CSS dans un fichier, le js dans un fichier et le modèle dans un fichier js ($templateCache), qui peut être empaqueté avec le fichier js.
Ensuite il y a
1 Téléchargez HTML (première demande, page purement statique, peut inclure du contenu de modèle angulaire, cette page devrait répondre rapidement)
2 Téléchargez CSS (une demande)
3 Téléchargez le fichier javascript et le fichier modèle js (une demande)
4 page de rendu angulaire
Un total de 3 requêtes + autres requêtes ajax sont effectuées.

"gulp": "~3.8.0",
"gulp-angular-templatecache": "^1.4.2",
"gulp-compass": "^2.0.1",
"gulp-concat": "^2.4.1",
"gulp-jasmine": "^1.0.1",
"gulp-jshint": "~1.5.5",
"gulp-livereload": "~1.3.1",
"gulp-minify-css": "^0.3.10",
"gulp-minify-html": "^0.1.6",
"gulp-mocha": "~0.5.1",
"gulp-ng-annotate": "^0.3.5",
"gulp-nodemon": "^1.0.4",
"gulp-shell": "^0.2.10",
"gulp-uglify": "^1.0.1",

Answer 3

Il est recommandé d'utiliser requireJs + angulaireJsAMD, qui peuvent être chargés à la demande.
Transfert de lien : https://github.com/marcoslin/angularAMD

Answer 4

angularjs fait plus de 170 Ko après compression. S'il est côté mobile, vous devriez le considérer côté PC. . Je ne pense pas que vous deviez y prêter trop d'attention. Si vous regardez les ressources m sur le front-end de teambition, ce n'est pas seulement un chargement

.

Answer 5

En partant du business et de la conception, des outils couramment utilisés tels que grunt peuvent empaqueter lib.min.js pour un chargement unique, et un chargement paresseux très couramment utilisé