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

Question

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

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

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

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

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

Answer 1

完美的方案是服务器端渲染首屏，不过angular似乎不擅长这个，没见到过实际的方案

稍差一些至少可以让服务端把首屏的数据吐在页面上

另外一些基本的css 模板 js的编译合并应该是最基本的

Answer 2

用一下gulp 工具
把 css 打包成一个文件, js打包成一个文件, 模板打包成一个js文件($templateCache) 可以和js 文件打包成一起.
然后就是
1 下载 HTML (第一个请求, 纯静态页面, 可能会包括部分angular模板内容, 这个页面响应要快)
2 下载 CSS (一个请求)
3 下载 javascript文件 和 模板js文件 (一个请求)
4 angular 渲染页面
一共3个请求 + 其他ajax请求搞定.

"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

推荐使用requireJs + angularJsAMD，可以做到按需加载。
链接传送：https://github.com/marcoslin/angularAMD

Answer 4

angularjs压缩后就170多kb 如果在移动端上你要考虑一下了 在pc端。。我感觉也不用太在意 你看teambition 前端上m的资源 还不是一个loading在转啊转

Answer 5

从业务和设计着手,常用的可以grunt等工具打包lib.min.js到一次性加载,非 常用的惰性加载