RequireJS 압축 도구인 r.js 상세 옵션

발생일: 2013.11.23

키워드: RequireJS, r.js, 압축, optimizer, 최적화, minification 

문제:

진행하고 있는 프로젝트에선 RequireJS를 사용하고 있다.
전반적으로 싱글 페이지 애플리케이션이지만, 별도로 분리되어 있는 페이지도 있어서,
스크립트의 공통 부분과 각 페이지에서 필요한 부분을 나눠서 압축하려고 한다.

RequireJS에는 전용 압축 도구인 `r.js`가 있고, 구미에 맞게 처리할 수 있도록 다양한 옵션을 제공한다.
옵션을 자세히 살펴보고, 리서치하면서 정리한 메모들이다.


해결책:

## Require.js Optimizer

http://requirejs.org/docs/optimization.html

- 다이나믹으로 로드되는 모듈은 `include` 옵션을 명시적으로 추가해줘야 함.


### RequireJS Optimizer를 로컬 모듈로 사용하기


### 빌드 옵션과 디렉토리

- `build.js` 파일을 쓰면, 이 파일을 기준으로 상대 경로
- 커맨드 라인으로 옵션을 넘겼다면, 워킹 디렉토리를 기준으로 상대 경로
- 파일 경로에 대한 속성은,
     appDir, dir, mainConfigFile, out, wrap.startFile, wrap.endFile
  이 있다.


- baseUrl
     - `appDir` 기준의 상대 경로
     - `appDir`이 없으면 `build.js` 기준으로 상대 경로
     - 커맨드 라인 옵션을 넘겼다면, 워킹 디렉토리 기준으로 상대 경로

- paths 와 packages
     - `baseUrl` 기준으로 상대 경로

- 파일 패스가 아니라 모듈 아이디로 작성해야 하는 속성
     - name, include, exclude, excludeShallow, deps

- 브라우저에서 런타임으로 읽어오기로 설정한 `config` 파일은 옵티마이저에서 사용하지 않음
     재사용하려면, `mainConfigFile` 옵션을 사용하면 된다.

- 설정 파일은, 커맨드라인 > build.js > mainConfigFile 순으로 우선순위를 갖는다.

- 압축에서 제외하려면, “empty:” 스킴을 사용한다.  
  CDN이나 외부 스크립트로 로드할 거라, 압축에는 포함하지 않을 파일인 경우에 해당한다.  
  `paths: { jquery: “empty:” }`

- 프로젝트를 빌드하려면, `build.js` 파일을 만든다.  
  해당 파일 내의 설정은 `build.js` 기준의 상대 경로라는 걸 명심한다.

- `dir` 옵션을 주면, 빌드하기 전에 모든 파일 `dir`에 명시한 디렉토리로 복사한 후 진행한다.  
  


## 멀티 페이지를 위해 압축하는 샘플

`modules` 옵션에 필요한 파일을 추가한다.




## Deployment Techniques




## jquery의 build.js


패턴 확인하면 도움이 될 듯

카테고리

분류 전체보기 (704)
About me. (6)
Daylogs (669)
비공개 (0)
영어공부 (0)
My works - 추억 (29)