RequireJS로 지연 로딩을 달성하는 방법은 무엇입니까?

RequireJS로 지연 로딩을 달성하는 방법은 무엇입니까?

---

우리는 Backbone, RequireJS 및 Handlebars를 사용하여 트라이 벌이 아닌 웹 응용 프로그램을 구축하고 있습니다. 현재 각 모델은 다음과 같습니다.

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

여기서 thing / a, thing / b는 둘 다 자신의 종속성을 가지고 있습니다. 예를 들어 Handlebars 템플릿 등에 대한 것입니다. 이제 내 main.js에서 모든 '최상위'라우터가로드되고 초기화됩니다. 각 최상위 라우터에는 각각 고유 한 종속성 (템플릿, 도우미, 유틸리티 등)이있는 종속성 (모델,보기 등) 집합이 있습니다. 기본적으로 큰 트리 구조입니다.

이 경우 문제는이 전체 트리가 해결되고 페이지로드시로드된다는 것입니다. 우리는 결국 최적화 프로그램을 통해 실행하고 하나의 큰 단일 파일로 끝날 것이기 때문에 sé 당 신경 쓰지 않습니다 (RequireJS를 기본적으로 모듈화 프레임 워크로 줄임). 그러나 '주문형'뷰 및 템플릿과 같은 항목을로드 할 수 있는지 궁금합니다.

여기 에 설명 된 "간단한 CommonJS 래핑"이 있으므로 시도해 보았습니다.

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

그러나 Chrome의 네트워크 검사기를 보면 doStuff 핸들러를 트리거하는 경로를 트리거하지 않아도 RequireJS가 여전히 myView종속성을 로드하는 것으로 보입니다 . 질문 :

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

---

이것이 실제로 가능합니까? 실제로 doStuff 경로를 트리거하지 않고 require () 호출을 찾는 RequireJS에 검은 마술이 있습니까?

'sugar'구문 을 사용Function.prototype.toStringrequire 하면 함수를 실행하기 전에 참조를 추출한 다음이를 종속성으로 나열 하기 위해 정규식 을 사용합니다 . 기본적으로 deps 배열을 첫 번째 인수로 사용하는 일반적인 정의 스타일이됩니다.

이 때문에 require 호출이 어디에 있는지 신경 쓰지 않고 조건문이 무시되는 이유입니다 (이러한 require호출이 변수가 아닌 문자열 리터럴을 사용해야하는 이유도 설명 합니다).

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

설탕 구문을 사용하면 본 것처럼 조건부로드가 허용되지 않습니다. 머리 위에서 생각할 수있는 유일한 방법 require은 deps 배열과 콜백 을 사용하는 호출 을 사용하는 것입니다 .

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

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

        });
    }

    return {};
});

단점은 또 다른 중첩 함수이지만 성능을 추구하는 경우 유효한 경로입니다.

이 표기법을 사용하면 r.js 최적화 프로그램이 광고 된대로 계속 작동합니까?

'sugar'구문을 사용하는 경우 예, 옵티마이 저가 제대로 작동합니다. 예 :

modules / test.js

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

    return {
        bla: true
    }
});

Once compiled by r.js this looks like:

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

    return {
        bla: true
    }
});

In conclusion you can load stuff conditionally, but as you mentioned, if you intend to optimise the project with r.js then there isn't a huge overhead in just using the sugar syntax.

---

You may also want to check out require-lazy.

It has a runtime component and a build time component. The runtime component allows you to lazily require a module as (note the lazy! plugin):

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

In the previous context, mymodule is a promise, the real module will be loaded with get() and will be made available in the then() callback:

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

Require-lazy integrates with r.js to automatically create "bundles" of Javascript files. It also handles automatically cache-busting for the bundles. There are several examples to get an idea. There is also Grunt and Bower integration.

참고URL : https://stackoverflow.com/questions/10911044/how-to-achieve-lazy-loading-with-requirejs