1
RequireJS를 사용하여 JS를 몇 개의 큰 JS 파일로 모듈화하여 필요할 때마다 의존성을로드 할 수 있지만 페이지를로드 할 때 큰 단일 JS 다운로드가 필요하지 않습니다. JS로 파일이 일례로서 다중 모듈에 대한 JS 최적화
:- 는 JS/
- JS /보기/카테고리 1/js1.js
- JS /보기/카테고리 1/js2.js 을 main.js
- JS /보기/카테고리 2/js1.js
- JS /보기/카테고리 2/js2.js
애플리케이션의 일부 (예 : category1의 모든 항목은 특정 유형의 사용자에 의해서만 사용되며 category2와 유사하게 모든 사용자에 대해 모든 항목을로드하는 것은 의미가 없습니다.
각각 js1.js 및 js2.js 파일의 모든 코드가 들어있는 두 개의 동적로드 모듈 (category1.js & category2.js)을 작성하기 위해 r.js의 빌드 구성을 시도하고 있습니다. 컴파일 된 출력을로드 할 때
({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
{
name: 'main',
exclude: [
"category1",
"category2"
]
},
{
name: "category1",
include: [
"views/category1/js1",
"views/category1/js2"
],
create: true
},
{
name: "category2",
include: [
"views/category2/js1",
"views/category2/js2"
],
create: true
}
],
fileExclusionRegExp: /^(r|build)\.js$/,
writeBuildTxt: false,
optimizeCss: 'standard',
removeCombined: true,
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone/backbone'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
}
})
RequireJS의 여러 개의 작은 JS 파일에서 몇 개의 고급 모듈을 만들 수 있는지 확신하지 못합니다. 이 경험이있는 사람이 있습니까?
편집
main.js :
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
}
},
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone/backbone'
}
});
require([
'views/app',
'router'
], function(AppView, Router) {
new Router();
Backbone.history.start();
});
index.html을 :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script data-main="js/main" src="js/lib/require/require.js"></script>
</head>
<body></body>
</html>
JS1, JS2 등이 파일은 router.js에서 참조되고있다. 당신이 require(['A'], ...)을하거나 당신이 define(['A'], ...이있을 때