RequireJS로 지연로드를 얻는 방법은 무엇입니까?

Question

우리는 Backbone, RequireJS 및 Handlebars를 사용하여 비범 한 웹 응용 프로그램을 작성하고 있습니다. 글쎄요, 저는 궁금합니다. 지금이 순간, 우리의 각 모델은 그렇다고 다음과 같습니다

define(['Backbone', 'js/thing/a', 'js/thing/b', 'js/lib/bob'], function(a, b, bob) { 
    return Backbone.Router.extend({ 
    // stuff here 
    }); 
}); 

경우 일/모두 등 핸들 바 템플릿에 예를 들어 자신의 의존성을 가지고 B A, 일/이제 어떻게 일어나는 것은 나의 주에서 .js, 모든 '최상위'라우터가로드되고 초기화됩니다. 각각의 최상위 라우터는 각각 의존성 (템플릿, 헬퍼, 유틸리티 등)을 갖는 일련의 의존성 (모델, 뷰 등)을 가지고 있습니다. 기본적으로 큰 나무 구조.

이 경우 문제는이 전체 트리가 확인되어 페이지로드시로드된다는 것입니다. 최적화가 끝날 때마다 하나의 큰 단일 파일로 끝나기 때문에 (기본적으로 RequireJS를 모듈화 프레임 워크로 줄임) 세세한 점은 신경 쓰지 않아도됩니다. 그러나보기와 템플리트와 같은 항목을 필요할 때로드 할 수 있는지 궁금합니다. 은 "단순화 된 CommonJS 포장은"이

는

here을 설명, 그래서 나는 것을 시도 :

이

define(function(require) { 
    Backbone = require('Backbone'); 
    return Backbone.Router.extend({ 
    doStuff: function() { 
     var MyView = require('js/myView'); 
     new MyView().render(); 
    } 
    }); 
}); 

그러나, 크롬의 네트워크 관리자보고, 그것은 보인다 RequireJS - 어떻게 든, 심지어 트리거 경로를 트리거하지 않고 doStuff 핸들러 - 여전히 myView 종속성을로드합니다. 질문 :

• 실제로 가능합니까? RequireJS에 실제로 doStuff 경로를 트리거하지 않고 require()에 대한 호출을 찾는 검은 마법이 있습니까?
• 이것은 RequireJS 모듈과 리소스의 '주문형', 지연로드에 대해 이론적으로 올바른 방법입니까?
• 이 표기법을 사용하면 r.js 옵티 마이저가 광고 된대로 작동합니까?

Answer 1

실제로 가능합니까? RequireJS에 실제로 doStuff 라우트를 트리거하지 않고 require() 호출을 찾는 까다로운 질문이 있습니까?

당신은 require로 참조를 추출하기 위해 '설탕'구문 it uses Function.prototype.toString and a regex을 사용하고 함수를 실행하기 전에 의존성로를 나열합니다. 기본적으로 첫 번째 인수로 deps 배열을 사용하는 일반적인 정의 스타일이됩니다.

이 때문에 필요 호출이 어디에 필요한지 신경 쓰지 않아 조건문이 무시됩니다 (이유는 해당 require 호출이 변수가 아닌 문자열 리터럴을 사용해야하는 이유이기도 함).

이것은 RequireJS 모듈과 리소스의 '주문형'로드 지연에 대해 이론적으로 올바른 방법입니까?

설탕 구문을 사용하면 본 것처럼 조건부 로딩이 허용되지 않습니다. 당신이 다음이 성능 이후 인 경우

define(function(require) { 
    var module1 = require('module1'); 

    // This will only load if the condition is true 
    if (true) { 
     require(['module2'], function(module2) { 

     }); 
    } 

    return {}; 
}); 

유일한 단점은 다른 중첩 된 함수지만 : 난 내 머리 위로 떨어져 생각할 수있는 유일한 방법은 deps의 배열과 콜백으로 require 전화를 사용하는 것입니다 올바른 경로입니다.

이 표기법을 사용하면 r.js 옵티 마이저가 광고 한대로 작동합니까?

'설탕'구문을 사용하는 경우 최적화 프로그램이 올바르게 작동합니다. 예 :

모듈은/일단이 모습 r.js에 의해 컴파일

define(function(require) { 
    var $ = require('jquery'); 
    var _ = require('underscore'); 

    return { 
     bla: true 
    } 
}); 

test.js : 조건부 물건을로드 할 수 있습니다 결론적으로

define('modules/test', ['require', 'jquery', 'underscore'], function(require) { 
    var $ = require('jquery'); 
    var _ = require('underscore'); 

    return { 
     bla: true 
    } 
}); 

, 그러나 당신이 언급 한 바와 같이 r.js로 프로젝트를 최적화하려는 경우 설탕 구문을 사용하는 데 엄청난 오버 헤드가 없습니다.

Answer 2

require-lazy을 확인할 수도 있습니다.

런타임 구성 요소와 빌드 시간 구성 요소가 있습니다. 실제 모듈이 get()로드되고에서 제공 될 것입니다, mymodule가 promise이며, 이전의 맥락에서

define(["lazy!mymodule"], function(mymodule) { 
    ... 
}); 

: 런타임 구성 요소를 사용하면 게으르게로 모듈합니다 (lazy! 플러그인을 참고)을 필요로 할 수 있습니다 then() 콜백 :

mymodule.get().then(function(m) { 
    // here m is the real mymodule 
}); 

필요-게으른 r.js와 통합하고를 자동으로 자바 스크립트 파일의 "번들"을 만들 수 있습니다. 또한 번들의 캐시 무효화를 자동으로 처리합니다. 아이디어를 얻으려면 몇 가지 예가 있습니다. Grunt과 Bower 통합도 있습니다.