requirejs - 조건에 모듈을로드하는 방법 - 좋은 해결책은 무엇입니까

Question

requirejs 및 조건에 모듈을 가져 오는 중 문제가 있습니다. 예를 들어, 일부 모듈과 함께 로그인 페이지가 있습니다. 일부는 사용자가 기록 될 때만 사용하고 다른 사용자는 기록하지 않을 때 사용합니다. .

최초의 솔루션 :가 로그인 할 때 물론 사용자에게 등록 할 수있는 기능을 원하지 않는, 그래서 두 difrent 솔루션이 나에게 여분 쉽게 제공

define(['jquery', 'dst!/static/dust/frontend/user_menu.dust'], function($, template) { 
    var handleResponse = function(data) { 
     if (data.status == 'not_logged') { 
      require(["user/frontend/register"]); 
      require(["user/frontend/login"], function(l) { 

      }); 
     } else { 
      require(["user/frontend/logout"]); 
      require(["user/frontend/change_password"]); 
      require(["user/frontend/profile_details"]); 
     } 
     template(data, function(err, html) { 
      $('#userMenu').html(html); 
     }); 

    }; 

    $.ajax({ 
     url: '/user/info/', 
     type: 'GET', 
     success: handleResponse 
    });  
}); 

: 단지 내가 필요한 물건을 필요로 코드를 읽을 수는 있지만 r.js 도구로 최적화 할 수는 없습니다.

두 번째 솔루션 :

define(['jquery', 'dst!/static/dust/frontend/user_menu.dust', 
'user/frontend/register', 'user/frontend/login', 'user/frontend/logout', 
'user/frontend/change_password', 
'user/frontend/profile_details'], function($, template, register, login, change_password, profile_details) { 
    var handleResponse = function(data) { 
     if (data.status == 'not_logged') { 
      register.init(); 
      login.init(); 

     } else { 
      logout.init(); 
      profile_details.init(); 
      change_password.init(); 

     } 

     template(data, function(err, html) { 
      $('#userMenu').html(html); 
     }); 

    }; 

    $.ajax({ 
     url: '/user/info/', 
     type: 'GET', 
     success: handleResponse 
    }); 
}); 

그것은 읽기 어렵다. 모든 것이 메모리에로드됩니다.

어쩌면 다른 옵션이있을 수 있습니까?

Answer 1

체크 아웃 내가 만든 작은 도서관 : require-lazy

그것은 당신이 쉽게 구문 게으른로드 모듈에 있습니다 :

define(["lazy!moduleWhenLogged", "lazy!moduleWhenAnonymous", 
function(moduleWhenLogged, moduleWhenAnonymous) { 
    ... 
    if(logginSucceeded) { 
     moduleWhenLogged.get().then(function(realModule) { 
      ... 
     }); 
    ... 
}); 

게으른로드 텍스트도에게!

define(["lazy!text!foo.html", ... 

그리고 r.js 작동 (즉 번들 종속성 그래프에 의한 분리 JS 파일에 다른 모듈).

설명서가 많지는 않지만 많은 예제가 있습니다. Grunt, Bower 플러그인도 있습니다.

Answer 2

하나의 해결책을 찾았지만, 내 프로젝트가 어떤 식 으로든 망가졌습니다. 각보기마다 다른 초기화 파일을 만들 수 있습니다 (사용자가 기록 할 때와 기록하지 않을 때). 최적화 도구가 올바르게 작동합니다 (파일 크기가 작아짐). 단지 r.js.에 최적화

초기화-logged.js

require([ 
//jquery plugins etc. 
'jquery', 'libs/jquery.cookie', 'libs/csrf', 
//main modules 
'user/frontend/register', 'user/frontend/login', 
]); 

초기화-singup.js

require([ 
//jquery plugins etc. 
'jquery', 'libs/jquery.cookie', 'libs/csrf', 
//main modules 
'user/frontend/logout', 'user/frontend/change_password', 'user/frontend/profile_details', 
]); 

그리고 그 후, 예제 1과 같은 파일을 선택하십시오. 포함하십시오.