티스토리 뷰
발생일: 2013.11.23
키워드: RequireJS, r.js, 압축, optimizer, 최적화, minification
문제:
진행하고 있는 프로젝트에선 RequireJS를 사용하고 있다.
전반적으로 싱글 페이지 애플리케이션이지만, 별도로 분리되어 있는 페이지도 있어서,
스크립트의 공통 부분과 각 페이지에서 필요한 부분을 나눠서 압축하려고 한다.
RequireJS에는 전용 압축 도구인 `r.js`가 있고, 구미에 맞게 처리할 수 있도록 다양한 옵션을 제공한다.
옵션을 자세히 살펴보고, 리서치하면서 정리한 메모들이다.
해결책:
## Require.js Optimizer
- 다이나믹으로 로드되는 모듈은 `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
패턴 확인하면 도움이 될 듯
반응형
댓글
공지사항