RequireJS-최적화 도구

이 장에서는 RequireJS의 최적화에 대해 설명합니다. RequireJS의 Optimizer에는 다음과 같은 특성이 있습니다.

기본 사용을위한 UglifyJS 또는 Java 사용을위한 Closure Compiler 의 도움으로 스크립트 파일을 결합 합니다.
CSS 파일을 함께 결합합니다.

옵티마이 저는 r.jsNode 및 Nashorn 용 어댑터 . 개발 프로세스가 아닌 빌드 프로세스의 일부로 개발되었습니다.

예

프로젝트 폴더에 r.js 를 다운로드 한 후 폴더 구조는 다음과 같아야합니다.

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

HTML 파일은 아래와 같이 보일 것입니다.

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

귀하의 main.js를 아래와 같이 파일이 보일 것이다 -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

귀하의 main.css가의 아래와 같이 파일이 보일 것이다 -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Optimizer의 기본 설정

프로젝트 설정을 위해 명령 줄 인수 또는 프로필 작성 속성을 사용할 수 있으며, 둘 다 서로 교환 할 수 있습니다.

다음은 명령 줄 구문입니다-

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

다음은 프로필을 구축하는 구문입니다-

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

그런 다음 아래와 같이 명령 줄에서 최적화 프로그램에 빌드 프로필 이름을 전달할 수 있습니다.

node r.js -o build.js

명령 줄 인수 구문에 몇 가지 단점이 있습니다. 명령 줄 인수 또는 프로필 작성 속성을 함께 사용하면 이러한 단점을 극복 할 수 있습니다.

단일 JS 파일 최적화

단일 JS 파일을 최적화하려면 모든 종속성의 내용을 포함하는 JS 파일을 만들어야합니다. 파일은 아래와 같이 보여야합니다.

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

이제 앱에 대한 모든 종속성이 있는 main.js 파일을 만들 수 있습니다 . 이 파일은 HTML 파일에서 하나의 요청으로 모든 JS 파일을로드하는 데 사용됩니다. 생성 된 파일은 소스 코드 디렉토리에 없어야합니다. 파일은 프로젝트 사본에 있어야합니다.

CDN 리소스 사용

최적화 프로그램은 네트워크 리소스 / CDN (Content Delivery Network)을 사용하여 스크립트를로드하지 않습니다. CDN을 사용하여 스크립트를로드해야하는 경우 이러한 파일을 모듈 이름에 매핑하고 파일을 로컬 파일 경로로 다운로드해야합니다. 다음 구문과 같이 빌드 프로필의 경로 구성에 특수 단어 "빈"을 사용할 수 있습니다.

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

메인 파일은 아래와 같이 보일 것입니다.

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

단일 CSS 파일 최적화

CSS 파일은 아래와 같이 명령 줄에서 직접 다음 매개 변수를 사용하여 최적화됩니다.

node ../../r.js -o cssIn = main.css out = main-built.css

CSS 파일은 아래와 같은 속성을 사용하여 빌드 파일에서 최적화 할 수도 있습니다.

...
cssIn:"main.css",
out:"main-built.css"
...

위의 두 방법이 모두 허용되며 projectfolder / css / mainbuild.css 라는 파일을 생성합니다 . 이 파일에는 main.css의 내용, 적절하게 조정 된 url () 경로 및 주석이 제거됩니다.

전체 프로젝트 최적화

최적화 프로그램은 빌드 프로필을 사용하여 모든 css 과 js파일. 다음 예에서는 build.js 파일이 생성됩니다.

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.js의 파일 (디렉토리 매개 변수) 내장 출력 폴더에있는 모든 응용 프로그램 폴더 (APPDIR 매개 변수) 복사 및 출력 폴더에있는 파일에 대한 모든 최적화를 적용 할 RequireJS를 지시합니다. 다음 명령을 실행하여 앱 폴더에 프로필을 만듭니다.

node r.js -o build.js