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.toString
require
하면 함수를 실행하기 전에 참조를 추출한 다음이를 종속성으로 나열 하기 위해 정규식 을 사용합니다 . 기본적으로 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
'Development Tip' 카테고리의 다른 글
바이너리 파일을 부호없는 문자 벡터로 읽는 방법 (0) | 2020.12.05 |
---|---|
Haskell에 ML 스타일 모듈을 추가하는 데있어 가장 큰 이론적 어려움은 무엇입니까? (0) | 2020.12.05 |
Boost 속성 트리 write_json이 모든 것을 문자열로 저장하는 이유는 무엇입니까? (0) | 2020.12.05 |
Koa / Co / Bluebird 또는 Q / Generators / Promises / Thunks 상호 작용? (0) | 2020.12.05 |
AAR에 전 이적 종속성이 포함될 수 있습니까? (0) | 2020.12.05 |