[AngularJS] ocLazyLoad - 필요한 파일만 로드하기

[AngularJS] LazyLoadingModule - 필요한 파일만 로드하기

 

 

 

 

 

 

 

 

 

• SPA 구조란?

 

=> SPA 는 Single Page Application 의 약자로, 하나의 페이지 안에서 사용자의 요청에 따른 UI/UX 변환이 이루어 지는

     구조를 말한다.

 

 

 

 

 

 

• SPA 의 장점이자 단점?

 

=> 하나의 페이지 안에서 모든 것이 이루어지기위해 최초 한번 모든 리소스를 로드하는데 시간이 길다. 

     대신에, 한번 로드하고나면 동적 리소스만 받아 처리하므로 그만큼 빠르다

 

 

 

 

 

 

 

 

이처럼 최초 구동이 느리다는 단점을 보완하기 위해 lazyLoad, 즉 최초 모든 리소스를 전부 로드하지 말고,

필요한 때에 필요한 파일들을 불러오는 기능을 구현하고자 한다.

 

 

ocLazyLoad 라이브러리의 자세한 사항은 readMe를 클릭하면 알아볼 수 있다.

 

 

 

 

 

 

 

 

 

 

[사용하기]

 

 

 

1) 첫째로 ocLazyLoad.js 를 다운로드한다. 다운로드 위치는 여기를 클릭한다.

    해당 .js 파일은 git repository 안의 'dist' 폴더 내부에 위치한다.

 

 

 

 

 

 

 

 

 

2) 이후 아래와 같이 최상위 app module 에 'oc.lazyLoad' 를 주입한다.

 

angular.module('app', ['oc.lazyLoad']);


//만약 이미 주입해둔 다른 요소가 있다면 그냥 옆에 추가해준다
//angular.module('app', ['ui.router', 'angular-inview', 'oc.lazyLoad']);

 

 

다운받은 ocLazyLoad.js 파일도 추가해주는 것을 잊지말자

 

<script type="text/javascript" src="/components/js/ocLazyLoad.js"></script>

 

 

 

 

 

 

 

 

 

3) 이제 lazyLoading 을 하기 윈하는 페이지의 config.js 파일에 가서 아래와 같이 lazyLoad 할 파일을 명시해준다

 

$stateProvider.state({
    name : 'search',
    url : '/search/:query',
    templateUrl : 'app/search/search.html',
    controller : 'searchController as searchCon',
    resolve : {
        lazyLoad : function($ocLazyLoad) {
            return $ocLazyLoad.load({
                //이곳에 lazyload 할 파일들을 명시한다
                files : ['app/search/search.controller.js', 'app/search/search.service.js]
            })
        }
    }
});

 

 

 

 

 

 

 

 

 

이제 개발자도구의 source 탭을 확인해보면 최초에는 search.html 만 로드되고,

search.html 로 페이지가 이동할 때, search.controller.js 와 search.service.js 가 함께 로드될 것이다.