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

Question

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

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

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

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

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

Answer 1

완벽한 해결책은 서버 측에서 첫 번째 화면을 렌더링하는 것인데 Angular는 이것을 잘 못하는 것 같고 실제 해결책을 본 적이 없습니다

좀 더 나쁜 것은 적어도 서버가 페이지의 첫 번째 화면 데이터를 뱉어낼 수 있다는 것입니다

또한 일부 기본 CSS 템플릿과 js의 컴파일 및 병합이 가장 기본이어야 합니다

Answer 2

꿀꺽꿀꺽 도구를 사용하세요
CSS를 파일로, js를 파일로, 템플릿을 js 파일($templateCache)로 압축하여 js 파일과 함께 패키지할 수 있습니다.
그럼
1 HTML 다운로드(순전히 정적 페이지인 첫 번째 요청에는 일부 각도 템플릿 콘텐츠가 포함될 수 있으며 이 페이지는 빠르게 응답해야 합니다)
2 CSS 다운로드(1회 요청)
3 자바스크립트 파일 및 템플릿 js 파일 다운로드(1회 요청)
4 각도 렌더링 페이지
총 3개 요청 + 기타 ajax 요청이 완료되었습니다.

으아아아

Answer 3

필요에 따라 로드할 수 있는 requireJs +angularJsAMD를 사용하는 것이 좋습니다.
링크 전송: https://github.com/marcoslin/angularAMD

Answer 4

angularjs는 압축 후 170kb가 넘습니다. 모바일 쪽이라면 PC 쪽에서도 고려해 보아야 합니다. . 팀비션 프론트엔드에 있는 m 리소스를 보면 단순한 로딩이 아니라고 생각합니다.

Answer 5

비즈니스와 디자인을 시작으로 grunt와 같이 일반적으로 사용되는 도구는 일회성 로딩을 위해 lib.min.js를 패키징할 수 있으며 매우 일반적으로 사용되는 지연 로딩