Browserify로 축소 된 출력을 얻는 방법은 무엇입니까?


90

방금 browserify 사용하기 시작 했지만 축소 된 출력을 유출하는 방법에 대한 문서를 찾을 수 없습니다.

그래서 나는 다음과 같이 보입니다.

$> browserify main.js > bundle.js --minified

9
축소는 browserify의 범위를 벗어나므로 축소기를 통해 출력을 실행해야합니다.
generalhenry

답변:


126

uglifyjs를 통해 파이프하십시오.

 browserify main.js | uglifyjs > bundle.js

다음과 같이 npm을 사용하여 설치할 수 있습니다.

 npm install -g uglify-js

3
grunt browserify / watchify 작업으로 어떻게할까요?
Greg Ennis

1
grunt를 사용하는 경우 두 단계로 수행하는 것이 좋습니다. 먼저 browserify로 컴파일 한 다음 축소합니다. 장점은 소스 맵이있는 개발 빌드와 모든 것을 제거하는 프로덕션 빌드를 가질 수 있다는 것입니다.
topek dec

네, 그게 제가 한 일입니다. 실제로 3 단계로 중간 파일을 정리해야합니다. 감사!
Greg Ennis

8
내 추악한 파일에 대한 소스 맵을 원하면 "브라우저 화"전에 코드를 가리킬 것입니다.
Thomas Deutsch

3
@ThomasDeutsch 나는 그것을 위한 플러그인을 만들었다 .
Ben

21

3.38.x부터는 내 minifyify 플러그인을 사용 하여 번들을 축소하고 여전히 사용 가능한 소스 맵을 가질 수 있습니다. 이것은 다른 솔루션에서는 불가능합니다. 최선의 방법은 압축되지 않은 번들로 다시 매핑하는 것입니다. 맵을 최소화하여 별도의 소스 파일 (예, coffeescript로도!)


1
그것은 그것이 browserify 버전 9까지 지원한다고 말합니다. Browserify는 현재 11.0.1입니다. 이를 지원합니까?
cchamberlain 2015 년

uglifyify은 좋은 교체로 나를 위해 작동하는 것 같군
브렛 Zamir에게

15

또는 "Browserify에서 처리하기 전에 Uglify의"squeeze "변환을 적용하는 이점을 제공 하는 uglifyify 변환을 사용 하십시오 . 즉, 조건부 요구 사항에 대한 데드 코드 경로를 제거 할 수 있음을 의미합니다."


여전히 최상위 답변에 표시된 uglify 파이프를 사용해야합니다. 그들은 문서의 시작 부분에 그렇게 말합니다.
carlin.scott

11

새로운 빌드 프로세스를 구성하는 방법을 조사하는 데 몇 시간을 소비 한 후 다른 사람들이 내가 한 일로부터 이익을 얻을 수 있다고 생각했습니다. Google에서 높게 나타나는이 오래된 질문에 대답하고 있습니다.

내 사용 사례는 OP가 요청한 것보다 조금 더 관련이 있습니다. 개발, 테스트, 프로덕션의 세 가지 빌드 시나리오가 있습니다. 대부분의 전문 개발자는 동일한 요구 사항을 가지고 있기 때문에 원래 질문의 범위를 넘어서는 것이 용납 될 수 있다고 생각합니다.

개발 중에는 watchify를 사용하여 JavaScript 파일이 변경 될 때마다 소스 맵과 함께 압축되지 않은 번들을 빌드합니다. 새로 고침을 누르기 위해 브라우저로 alt-tab을 (를) 누르기 전에 빌드가 완료되기를 원하기 때문에 uglify 단계를 원하지 않으며 어쨌든 개발 중에 아무런 이점이 없습니다. 이를 달성하기 위해 다음을 사용합니다.

watchify app/index.js  --debug -o app/bundle.js -v

테스트를 위해 프로덕션과 똑같은 코드 (예 : uglified)를 원하지만 소스 맵도 원합니다. 나는 이것을 달성한다 :

browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"

프로덕션 의 경우 코드는 uglify로 압축되며 소스 맵이 없습니다.

browserify app/index.js  | uglifyjs -cm > app/bundle.js

메모:

Windows 7, MacOS High Sierra 및 Ubuntu 16.04에서이 지침을 사용했습니다.

더 이상 유지되지 않기 때문에 minifyify 사용을 중단했습니다.

내가 공유하는 것보다 더 좋은 방법이있을 수 있습니다. 나는 browserify와 결합하기 전에 모든 소스 파일을 무시함으로써 우수한 압축을 얻을 수 있다는 것을 읽었습니다. 내가 가지고있는 것보다 더 많은 시간을 할애 할 수 있다면 조사해 볼 수 있습니다.

watchify, uglify-js 또는 browserify가 아직 설치되지 않은 경우 npm과 함께 설치하십시오.

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

이전 버전이 설치되어있는 경우 업그레이드하는 것이 좋습니다. 특히 uglify-js는 명령 줄 인수를 크게 변경하여 Google에 표시되는 많은 정보를 무효화합니다.


4

소스 맵을 보존하면서 축소하기 위해 더 이상 플러그인을 사용할 필요가 없습니다.

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js

1

나는 같은 terser ES6 +와 좋은 comporession에 대한 지원뿐만 아니라 있습니다.

browserify main.js | terser --compress --mangle > bundle.js

전역 적으로 설치 :

 npm i -g terser
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.