angular.js - What are the methods to optimize the homepage loading of AngularJS single-page applications?

Question

In traditional web page requests, data is loaded into the template on the server side, which can be completed in one step.

1. Download HTML
2. Download CSS/javascript
3. Rendering

Single-page applications need to download the framework before starting to load data.

1. Download HTML
2. Download CSS/javascript
3. Download data/template
4. Rendering

Is there any way to reduce the number of requests, or turn this serial loading into a parallel method?

Answer 1

The perfect solution is to render the first screen on the server side, but Angular seems not good at this and I have never seen an actual solution

A little worse, at least the server can spit out the first screen data on the page

In addition, the compilation and merging of some basic css templates and js should be the most basic

Answer 2

Use the gulp tool
Pack css into a file, js into a file, and template into a js file ($templateCache), which can be packaged together with the js file.
Then there is
1 Download HTML (the first request, purely static page, may include some angular template content, this page should respond quickly)
2 Download CSS (one request)
3 Download javascript files and template js files (one request)
4 angular rendering page
A total of 3 requests + other ajax requests completed.

"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

It is recommended to use requireJs + angularJsAMD, which can be loaded on demand.
Link transfer: https://github.com/marcoslin/angularAMD

Answer 4

angularjs is more than 170 kb after compression. If it is on the mobile side, you should consider it on the PC side. . I don’t think you need to pay too much attention to it. If you look at the m resources on the teambition front-end, it’s not just a loading.

Answer 5

Starting from business and design, commonly used tools such as grunt can package lib.min.js for one-time loading, and very commonly used lazy loading