angle2 응용 프로그램의 코드에 액세스 할 수 있고 느슨하게로드 된 모듈이있는 경우 코드를 검사하지 않아도 해당 모듈을 테스트하여 느린 로딩인지 확인할 수 있습니다. 필요하다면 다른 방법이 없다면 문제의 모듈에 코드를 추가하여 테스트 할 수 있습니다. 하지만 어떤 코드를 추가할까요? 크롬 개발 도구 (Ctrl + Shift + I) 구글 크롬 브라우저에서의angular2의 모듈이 느리게로드되었는지 확인하거나 증명할 수 있습니까?
확인 네트워크 탭을 선택합니다.
모듈이 지연로드되지 않으면 사이트가 처음로드 될 때 네트워크 탭에 모듈 행이 표시됩니다.
제대로 지연로드되는 경우 해당 경로를 탐색 할 때만 모듈의 행을 볼 수 있습니다.
희망이 도움이됩니다.
감사합니다. 나는이 만족감에 대한 답을 시험 할 수 없었지만, 내가 가지고있을 때 다시 방문 할 것이다. – Reid
네트워크 트래픽이 어떻게 보일 수 있는지 스크린 샷을 제공해 주시겠습니까? 대단 하시겠습니까! –
나는 이것도 확인하고 싶었다. Network 탭을 살펴 보았지만, 통합 된 Angular 2 개발 환경에서 파일은'bundle.js'에로드됩니다. 따라서 어떤 파일이로드되는지 구분할 수 없습니다 (atleast 나는 그렇게 생각합니다). 나는 심지어 바이올린을 사용하여 시도했지만 동일한 '번들 된'결과를 보여줍니다. OP 질문에 대한 대안이 있습니까? –
배경 개념 : 우선, 게으른로드에 대해 명확하게 설명해야합니다. 게으른로드는 기본적으로 네트워크 또는 서버가 아닌 메모리 (RAM)에 느리게 모듈을로드합니다. 브라우저 캐시 (HD)에 이미있는 모듈 (js 스크립트) - 앱로드 중에 네트워크에서 가져 왔습니다. 따라서 특정 모듈을 느리게로드하면 네트워크 최적화가 아니라 메모리 최적화에 도움이됩니다.
확인하는 방법 : 그냥 모듈 클래스 정의의 생성자 함수에 CONSOLE.LOG을 넣어
import { NgModule } from '@angular/core';
import { LazyComponent } from './lazy.component';
import { LazyService } from './lazy.service';
@NgModule({
imports: [ ],
declarations: [ LazyComponent ],
providers: [LazyService]
})
export class LazyModule {
constructor() {
console.log('Lazily Loaded : LazyModule');
}
}
'를 모듈 클래스의 생성자에 보내고 호출 된 시점을 확인합니다 (아직 시도하지 않았습니다). –
게으른로드 된 모듈로 이동하기 전에 네트워크 활동을 지우고 레이디로드 된 경우 해당 모듈에 필요한 파일이로드됩니다. –