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

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

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

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



답변

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

 browserify main.js | uglifyjs > bundle.js

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

 npm install -g uglify-js


답변

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


답변

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


답변

새로운 빌드 프로세스를 구성하는 방법을 조사하는 데 몇 시간을 소비 한 후 다른 사람들이 내가 한 일로부터 이익을 얻을 수 있다고 생각했습니다. 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에 표시되는 많은 정보를 무효화합니다.


답변

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

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


답변

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

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

전역 적으로 설치 :

 npm i -g terser


답변