2012-08-06 3 views
6

requirejs를 사용하여 단일 페이지 백본 응용 프로그램을 개발하고 있으며 베타 서버에 배포 할 때 모든 스크립트를 가져 오는 동안 초기 페이지로드가 약 20 초 였음을 발견했습니다. 내가 생각초기 페이지로드시 require.js가 모든 모듈을로드하는 것처럼 보이는 이유는 무엇입니까?

define([ 
    'ui', 
    'models/user', 
    'collections/campaigns', 
    'collections/groups', 
    'collections/keywords', 
    'collections/inboxes', 
    'collections/templates', 
    'collections/contacts', 
    'router' 
], function (Ui, UserDetails, Campaigns, Groups, Keywords, Inboxes, Templates, Contacts, Router) { 

    return { 
     start: function() { 
      // ... 
      // initialize and start app 
      // ... 
     } 
    } 
}); 

는 주 응용 프로그램 모듈이로드 될 때, 다른 모든 스크립트를로드 할 것이라는 의미로 인해 :

나는과 같이 모듈을 정의 할 때 내가 종속성 배열을 사용했기 때문에이 있었다 가정 모든 단일 모듈이이 방법을 사용하고 있었다는 사실. 다시

그러나
define(function (require) { 
    return Backbone.Router(function() { 
     // ... 
     // route initializtion etc 
     // ... 

     inbox: function (routeVar) { 
      var InboxView = require('InboxView'); 
      this.inboxView = new InboxView(); 
      // render view etc 
     } 
    }); 
}); 

놀랍게도, 응용 프로그램을 실행시 및 확인 :

은 그때 내가 직접 require('...')를 호출하여 필요에 따라이 같은 그들을 필요로 할 때 그들을 얻을 모듈을 가져 오는 방법을 변경 chromes 개발자 콘솔의 네트워크 탭 - 응용 프로그램이 모든 모듈을 가져 오기 전에 동일한 페이지로드 시간을 얻는 것을 보았습니다.

여기에서 요점을 완전히 놓치고 있습니까? 필자는 필 요할 때마다 스크립트가 인출 될 것이라는 인상을 받았다. 그게 옳지 않은가? 비동기 당신이 필요로하고 요청 된 모듈이로드되었을 때 호출되는 함수 콜백을 제공 호출해야 AMD 모듈을로드하기 위해

답변

6

:

require(['InboxView'], function(InboxView) { 
    // Do something with InboxView here... 
}); 

당신이 동기 스타일 require('InboxView') 전화에서 제공하는 샘플 코드 . 당신이 "sugar"구문을 사용하고 있기 때문에, RequireJS는 require()에 대한 동기 호출을 찾아 코드를 검사하고 당신이주는 효과, 모듈의 최상위 종속성 목록에 그 종속성을 추가 :

define(['require', 'InboxView'], function (require) { 
    return Backbone.Router(function() { 
    // ... 
    // route initializtion etc 
    // ... 

    inbox: function (routeVar) { 
     var InboxView = require('InboxView'); 
     this.inboxView = new InboxView(); 
     // render view etc 
    } 
    }); 
}); 

... 따라서 모든 모듈이 즉시로드 된 것을 보았습니다.

require에 비동기 콜백을 추가하면 정상이어야합니다. 또한로드가 완료 될 때까지 require 호출 차단없이 경로가 시작될 때까지 RequireJS가 InboxView에 대한 모듈을로드하기를 기다리는 경우 코드가 어떻게 작동할까요? :)

+1

글쎄 사실 스크립트를로드하는 동안 차단하겠다고 생각했습니다. 정보를 주셔서 감사합니다. – jcvandan

+0

답장을 보내 주시면 비동기 요청을 처리하여 내 문제를 해결할 수 있습니다. 이제는 초기 페이지로드가 크게 줄어 들었습니다. 고마워요! – jcvandan

+0

"[ 'require', 'InboxView']"의 의미는 무엇입니까? 나는 이런 것을 본 적이 없다. 감사. –

관련 문제