angular.js - AngularJS 단일 페이지 애플리케이션의 홈페이지 로딩을 최적화하는 방법은 무엇입니까?

Question

기존 웹페이지 요청에서는 데이터가 서버측 템플릿에 로드되어 한 단계로 완료될 수 있습니다.

1. HTML 다운로드
2. CSS/자바스크립트 다운로드
3. 렌더링

단일 페이지 애플리케이션은 데이터 로드를 시작하기 전에 프레임워크를 다운로드해야 합니다.

1. HTML 다운로드
2. CSS/자바스크립트 다운로드
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를 패키징할 수 있으며 매우 일반적으로 사용되는 지연 로딩