angular.js - Apakah kaedah untuk mengoptimumkan pemuatan halaman utama aplikasi halaman tunggal AngularJS?

Question

Dalam permintaan laman web tradisional, data dimuatkan ke dalam templat di sebelah pelayan, yang boleh diselesaikan dalam satu langkah.

1. Muat turun HTML
2. Muat turun CSS/javascript
3. Perenderan

Aplikasi satu halaman perlu memuat turun rangka kerja sebelum mula memuatkan data.

1. Muat turun HTML
2. Muat turun CSS/javascript
3. Muat turun data/templat
4. Perenderan

Adakah terdapat sebarang cara untuk mengurangkan bilangan permintaan, atau menukar pemuatan bersiri ini kepada kaedah selari?

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