프런트엔드 최적화: RequireJS Optimizer 사용 및 구성 방법
RequireJS Optimizer의 스크립트 최적화는 현재 유행하는 UglifyJS와 Closure Compiler 두 가지 압축 방식을 지원하는데 UglifyJS는 NodeJS 환경 지원이 필요하고 Closure Compiler는 자바 환경이 필요하다.이 글은 NodeJS에서 실행되는 UglifyJS로 최적화되었습니다. 이것은 RequireJS Optimizer의 기본적인 압축 방법입니다.
먼저 Node 0.4.0을 설치한 다음에 r.js를 다운로드해야 합니다. 다운로드를 한 후에 명령줄에서 전단 코드를 최적화할 수 있습니다.r.js의 매개 변수 전달 사용 방법
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js
둘째는 새로운build입니다.js(이런 방식을 추천합니다) 이렇게 설정하면 다음과 같이 더욱 편리합니다.
node r.js -o build.js
build.js의 구성 코드는 다음과 같습니다.
{
baseUrl: "../js",
dir: "../dist",
optimize: "uglify",
optimizeCss: "standard.keepLines",
mainConfigFile: "../js/main.js",
removeCombined: true,
fileExclusionRegExp: /^\./,
modules: [
{
name: "app/dispatcher",
},
{
name: "app/in-storage",
exclude: [
"jquery",
"app/common",
"pkg/DatePicker/app"
]
}
]
}
기본 매개 변수 소개
기본적으로 모든 모듈은 이 경로에 상대적입니다.설정이 없으면, 모듈의 불러오는 것은build 파일이 있는 디렉터리와 같습니다.또한 appDir를 설정하면 베이스Url은 appDir에 대한 경로로 정의해야 한다.
- "uglify： UglifyJS ， ；
- "uglify2"： 2.1.2+ ；
- "closure"： Google's Closure Compiler ， Java ；
- "closure.keepLines"： Closure Compiler ；
- "none"： ；
- "standard"： ；
- "standard.keepLines"： ；
- "standard.keepComments"： ；
- "standard.keepComments.keepLines"： ；
- "none"： ；
- `name：` ；
- `include：` ，`create：` ， 。 `false`；
- `exclude：` 。 ， ， 。 exclude ， 。
RequireJS 구성은 다음과 같은 RequireJS Optimizer 구성 파일에 배치될 수도 있습니다.
{
baseUrl: "../js",
dir: "../dist",
optimize: "uglify",
optimizeCss: "standard.keepLines",
removeCombined: true,
fileExclusionRegExp: /^\./,
modules: [
{
name: "app/dispatcher",
},
{
name: "app/in-storage",
exclude: [
"jquery",
"app/common",
"pkg/DatePicker/app"
]
}
],
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone/backbone',
backboneLocalstorage: 'lib/backbone/backbone.localStorage',
text: 'lib/require/text'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
}
}
}
RequireJS Optimizer의 구성 매개변수는 아직 많이 있습니다. 전체 매개변수 설명은 다음과 같습니다.
example.build.js
간편하게 실행할 수 있도록 배치 파일을 새로 만들 수 있습니다.
@echo off
echo build...
e:
cd E:\SCM\SRC\scm-html
ew-scm-html\tools
node r.js -o build.js
echo Press any key to exit!
echo. & pause
참고: RequireJS Optimizer는 Require와 define 구문으로 정의된 모듈만 지원하므로 다음과 같은 변수 정의 방식은 지원되지 않습니다.
var mods = someCondition ? ['a', 'b'] : ['c', 'd'];
require(mods);
이렇게 정의한 경우 다음을 수행할 수 있습니다.
require(['a', 'b']);
또는
define(['a', 'b'], function (a, b) {});
한층 더 최적화하다
r.js 최적화된 코드를 사용하면almond를 사용하여 불러올 수 있습니다.almond는 가벼운 AMD 캐리어로 가장 기초적인 AMD API 구현과 모듈 탑재 기능을 제공합니다.almond는 400줄 미만의 코드만 있고 RequireJS보다 훨씬 작다.r.js를 사용하여 almond를 다음과 같이 업무 코드 앞에 통합할 수 있습니다.
(function () {
//almond will be here
//main and its nested dependencies will be here
}());
almond는 AMD 웹 사이트나 애플리케이션에 특히 적합하지만 몇 가지 제한이 있습니다.
만약 프로젝트에 이런 문제가 없다면, 알몬드를 사용해서 불러올 수 있습니다.
꿈꾸다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
