angular.js - AngularJS 单页面应用首页加载优化有哪些方法？

Question

传统网页的请求中，数据在服务器端加载到模板上，一步就可以完成。

1. 下载 HTML
2. 下载 CSS / javascript
3. 渲染

单页面应用需要先下载框架，然后才能开始加载数据。

1. 下载 HTML
2. 下载 CSS / javascript
3. 下载数据 / 模板
4. 渲染

有什么办法减少请求次数，或是将这种串行加载变成并行的方法呢？

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é