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

Question

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

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

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

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

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

Answer 1

Penyelesaian yang sempurna adalah untuk memaparkan skrin pertama pada bahagian pelayan, tetapi Angular nampaknya tidak pandai dalam hal ini dan saya tidak pernah melihat penyelesaian sebenar

Sedikit lebih teruk, sekurang-kurangnya pelayan boleh memuntahkan data skrin pertama pada halaman

Penyusunan dan penggabungan beberapa templat css asas dan js lain harus menjadi yang paling asas

Answer 2

Gunakan alat teguk
Pakej css ke dalam fail, js ke dalam fail dan templat ke dalam fail js ($templateCache), yang boleh dibungkus bersama-sama dengan fail js.
Kemudian ada
1 Muat turun HTML (permintaan pertama, halaman statik tulen, mungkin termasuk beberapa kandungan templat sudut, halaman ini harus bertindak balas dengan cepat)
2 Muat turun CSS (satu permintaan)
3 Muat turun fail javascript dan fail js templat (satu permintaan)
4 halaman pemaparan sudut
Sebanyak 3 permintaan + permintaan ajax lain telah dilakukan.

"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

Adalah disyorkan untuk menggunakan requireJs + angularJsAMD, yang boleh dimuatkan atas permintaan.
Pemindahan pautan: https://github.com/marcoslin/angularAMD

Answer 4

angularjs adalah lebih daripada 170 kb selepas pemampatan Jika ia berada di bahagian mudah alih, anda harus mempertimbangkannya di bahagian PC. . Saya rasa anda tidak perlu memberi terlalu banyak perhatian kepadanya. Jika anda melihat sumber m pada bahagian hadapan tembisi, ia bukan sekadar pemuatan

Answer 5

Bermula dari perniagaan dan reka bentuk, alatan yang biasa digunakan seperti grunt boleh membungkus lib.min.js untuk pemuatan sekali sahaja dan pemuatan malas yang sangat biasa digunakan