각도 2 최초로드 진행

각도 2의 번들 크기를 줄이고 크기를 ~ 300kb (Angular 2 + jquery + 부트 스트랩 + 일부 다른 소형 타사 라이브러리)로 줄이는 데 성공했습니다. Browserify + Rollup + Minify + GZIP을 사용하여이 번들을 다운로드해도 번들을 다운로드하는 데 시간이 걸리고 반영 및 zone.js의 초기 로딩 시간이 고려됩니다. 즉, 최대 4-5 시간이 소요될 수 있습니다. 느린 장치 (휴대 전화)에서 사이트를로드하는 데 몇 초가 걸릴 수 있습니다.각도 2 최초로드 진행

나는 이것이 적어도 (현재는 적어도) 불가피하다는 것을 알고 있지만 다운로드 + reflect/zone.js 초기화의 백분율로 초기로드에 대한로드 진행률을 표시하는 방법이 있습니까?

같이가에서 대부분의 예제 : 작업하고 Loading...은 스피너 또는 무엇이든 하나를 선택할 수 있지만, 실제 진행 상황을 얻을 수있는 방법이 사용자 지정 서식으로 대체 할 수있는

<body> 
    <my-app>Loading...</my-app> 
</body>

의미있는 방식으로?

내가 찾고있는 항목은 최소/최대 및 일부 불확정 회 전자가 아닌 실제 진행률 막대 인 Gmail의로드 진행률과 같으므로 사용자는 필요한 기간에 대한 표시 형식을 가질 수 있습니다. 사이트가로드 될 때까지 기다립니다. 사전에

많은 감사,

업데이트 (24 10 월 2016)

내가 꽤 (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)을 질주 한 어떤 일을 컴파일 앞서-의 시간에 대한 NGC를 사용하기 시작했다 (비록 묶음 크기가 ~ 500kb로 압축되었지만) 모든 것이 다운로드 된 후에도 웹 사이트를로드하는 데 ~ 300ms가 걸립니다.

이상적으로 다운로드 및로드 프로세스를 가로 채고 해당 상태 (예 : 230kb/500kb 다운로드 또는 모듈 작성 완료의 10 %)를 조사하고 진행률 막대 및 상태를로드 할 수 있기를 바랍니다. 막대는 실제로 그들이 무엇을 기다리고 있는지 사용자에게 알려줍니다.

현재 진행률 표시 줄에 최소 CSS를로드하고 표시 한 다음 onLoad 함수에서 모든 각도 물건을 순서대로로드하고 이전보다 훨씬 부드럽지만 여전히 명확하지 않습니다. 사용자는 인터넷 연결 및 장치 기능에 따라 0.5 초에서 몇 초 정도 기다려야합니다. 나는 확실하지 않다

출처

2016-07-11 kha

좋은 질문이지만 일반 솔루션 (롤업을 사용하고있을 수도 있고, 다른 누군가가 webpack 등을 사용할 수도 있습니다)이 까다 롭다고 생각하십니까? 아마 너무 도움이 각도에 대한 몇 가지 도움말/API/후크가 필요합니다. –

AOT 컴파일을 시도 했습니까? (속도 최적화 용) –

@redaigbaria 있습니다.확실히 빠르지 만 2 초 동안 의미있는 상태를 유지하는 진행 막대를 표시하거나 느린 장치를 사용합니다. – kha

은/zone.js을 반영하지만, 다운로드를 위해 우리는이

<body onload="showApp()"> 
    <div class="progress-bar" id="loadingContainer"></div> 
    <my-app style="display: none"><my-app> 
</body> 

showApp() { 
    document.getElementById('loadingContainer').style.display = "none"; 
    document.getElementsByTagName('my-app')[0].style.display = null; 
}

출처

2016-10-23 17:40:06 Eswar

그런 다음 다른 모든 파일을로드 할 것이다, 당신의 index.html에서 두 번째 스크립트를 추가 할 수 있습니다 (따를 수 있습니다 index.html이 (가) 지금하고있는 것처럼). 그러면 파일에 대한 AJAX 요청이 많아지고 DOM에 추가 할 수 있습니다. 진행 상황을 추적하려면 Content-Length 헤더와 함께 HTTP HEAD 요청을 사용해보세요.

출처

2018-02-27 22:17:55

각도 2 최초로드 진행

답변

관련 문제