AngularJS : 디렉토리 구조 (예 : 모듈 프로그래밍)가 로딩 시간에 영향을 줍니까?

Question

모듈 식 프로그래밍은 로딩 시간을 줄이고 어떻게 사용할 수 있습니까?

AngularJS 애플리케이션을 모듈화하는 방법에 대해 읽었습니다. 일반적으로 이렇게하는 이유는 큰 응용 프로그램을 만들 때 좋은 구조를 가지므로 하나는 does not have to scroll to much between files이고 재사용 가능한 모듈과 독립 실행 형 모듈은 분리됩니다.

실용적인 관점에서 볼 때 분명히 의미가 있지만, 로딩 시간을 지원하는 주장을 거의 찾을 수 없습니까?

---

index.html을 로딩 시간을 줄이는 대신 모두의 별도 .html 중에서 파일에서의 .js 파일을 참조 할 것인가?

나는 다음을 생각하고 있었다. 아래와 같은 디렉토리 구조가있는 경우 (디렉토리 구조 예). index.html 대신 모두 .html 파일의 .js 참조를 입력하면로드 시간이 줄어 듭니다. 예를 들어, sidebarView.htm리터에 추가합니다 :

<script src='sidebarDirective.js'></script> 

---

디렉토리 구조는 예

app/ 
----- shared/ // acts as reusable components or partials of our site 
---------- sidebar/ 
--------------- sidebarDirective.js 
--------------- sidebarView.html 
---------- article/ 
--------------- articleDirective.js 
--------------- articleView.html 
----- components/ // each component is treated as a mini Angular app 
---------- home/ 
--------------- homeController.js 
--------------- homeService.js 
--------------- homeView.html 
---------- blog/ 
--------------- blogController.js 
--------------- blogService.js 
--------------- blogView.html 
----- app.module.js 
----- app.routes.js 
assets/ 
----- img/  // Images and icons for your app 
----- css/  // All styles and style related files (SCSS or LESS files) 
----- js/  // JavaScript files written for your app that are not for angular 
----- libs/  // Third-party libraries such as jQuery, Moment, Underscore, etc. 
index.html 

Answer 1

당신이 AngularJS와 단일 페이지 응용 프로그램을 구축하고, 가장 좋은 방법은 연결하는이며, 모든 자바 스크립트를 단일 파일로 축소하고 모든 HTML 뷰를 단일 파일로 사전 컴파일하십시오. 이 파일을 index.html 파일에 직접 포함시킬 수 있습니다. 이는 클라이언트가 앱을 실행하는 데 필요한 모든 코드를 가져올 수있는 네트워크 요청을 두 번만 수행 할 수 있으며보기를 전환 할 때 물건을 다운로드 할 때까지 기다릴 필요가 없다는 것을 의미합니다.

개인적으로 필자는 gulp을 사용하여 파일을 빌드하지만 많은 빌드 시스템이 있습니다.

gulp.task('scripts', function() { 
    return gulp.src(scripts) 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./build/scripts')) 
    .pipe(refresh(lrserver)); 
}); 

gulp.task('customscripts', function() { 
    return gulp.src(customscripts) 
    .pipe(concat('app-custom.js')) 
    .pipe(gulp.dest('./build/scripts')) 
    .pipe(refresh(lrserver)); 
}); 

gulp.task('views', function() { 
    return gulp.src(views) 
    .pipe(minifyhtml({empty:true, spare: true, quotes: true, conditionals: true})) 
    .pipe(rename(function(path) { 
     path.dirname = ''; 
    }))  
    .pipe(html2js({moduleName: 'app', prefix: 'views/'})) 
    .pipe(concat('app-views.js')) 
    .pipe(gulp.dest('./build/scripts')) 
    .pipe(refresh(lrserver)); 
}); 

그리고 index.html 파일에 : 당신이 볼 수 있듯이

<script src="/scripts/app-custom.js"></script> 
<script src="/scripts/app.js"></script> 
<script src="/scripts/app-views.js"></script> 

, 디렉토리 구조에 전혀 중요하지 않습니다 여기에 스크립트 건물을 처리하는 내 gulpfile의 샘플입니다 하루의 끝. 개인적으로 저는 모듈 식 접근법을 사용하기로 전환했고 더 큰 프로젝트의 경우 조직화되고 구성 요소 화가 쉬워졌습니다.