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

Question

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

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

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

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

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

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