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

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

참고 URL : https://stackoverflow.com/questions/15590702/how-to-get-minified-output-with-browserify