Javascript 축소 도구 14 개

자바 스크립트 축소는 스크립트를 훨씬 작은 공간으로 압축합니다.. 사람의 가독성을 잃어 버리지 만 상당한 대역폭을 절약 할 수 있습니다. 결국, Javascript는 사용자를위한 것이 아닌 브라우저 용입니다..

대부분의 프로덕션 웹 사이트는 자바 스크립트 축소를 사용하지만이 방법은 크게 다릅니다. 간단한 온라인 변환기에서보다 포괄적 인 GUI 도구, 명령 줄 인터페이스에 이르기까지 다양한 옵션이 제공됩니다. 이 기사에서는 Javascript 축소 작업 방법, 우리가 워크 플로우에 그것을 어떻게 구축 할 수 있는지, 그리고 축소 된 장단점은 무엇인지.

Minification의 작동 원리

코드를 축소 할 때 일어나는 일을 배우는 가장 좋은 방법은 UglifyJS Github Repository를 살펴 보는 것입니다. 이 스크립트는 Grunt와 같은 GUI 도구와 명령 줄 도구뿐만 아니라 많은 온라인 변환기에서 사용됩니다. 다음은 코드를 짧게 만들 때 적용되는 몇 가지 변형입니다.

불필요한 공간을 제거합니다.
변수 이름을 보통 단일 문자로 줄입니다.
연속 된 var 선언을 조인합니다.
가능한 경우 배열을 객체로 변환합니다.
if 문 최적화
간단한 상수 표현식 계산
기타.

간단한 예로서, 여기에 주어진 텍스트를 본질적으로 작성하는 함수가 있습니다..

 함수 안녕하세요 (텍스트) document.write (텍스트);

안녕하세요 ( '기사에 오신 것을 환영합니다');

우리가 이것을 축소하면 어떻게되는지 봅시다. 공백과 들여 쓰기의 제거와 텍스트 변수의 단축에 주목하십시오..

function hello (e) document.write (e) hello ( "기사에 오신 것을 환영합니다")

Javascript 축소 도구

Javascript를 축소하는 데 사용되는 도구는 크게 온라인 도구, GUI 도구 및 명령 줄 도구의 세 그룹으로 분류 할 수 있습니다..

온라인 도구를 사용하면 대개 코드를 붙여넣고 즉시 결과를 복사 할 수 있습니다.
GUI 도구에는 종종 더 많은 기능이 포함되어 있습니다. JS minification은 자신이하는 일의 일부일뿐입니다..
명령 줄 도구는 일반적으로 더 포괄적이어서 모듈화를 제공합니다.

온라인 도구

javascript-minifier.com은 API가있는 멋진 도구입니다.
Online YUI Compressor는 다양한 옵션과 CSS 축소 기능을 갖춘 YUI 압축기를 사용하는보다 강력한 도구입니다.
jscompress.com은 노 프릴 (jacompress.com)을 사용하지 않는 미니 화자이지만 작업이 완료됩니다.
jsmini.com은 간단하지만 완전히 사용할 수있는 또 다른 옵션입니다.

온라인 도구의 가장 큰 장점은 사용자가 작업 할 수있는 속도입니다. 복잡한 GUI 및 명령 줄 도구는 더 빨리 축소되지만 제대로 작동하려면 프로젝트를 설정해야합니다. 이 도구의 단점은 대부분이 맞춤 설정을 거의 내지 전혀 제공하지 않는다., 최소한 명령 행 도구와 비교했을 때.

GUI 도구

코알라는 LESS, SASS 편집, JS 축소 및 기타 기능을위한 무료 도구입니다.
Prepros는 더 많은 옵션을 제공하는 교차 플랫폼 유료 앱입니다.
Codekit은 내가 선택한 앱입니다. 코드 컴파일, 축소, 미리보기 서버, bower 패키지 관리 등을 제공하는 유료 Mac 전용 앱입니다.
AjaxminGui는 JS를 소형화 할 수있는 무료 단일 Windows 도구입니다.
UltraMinifier는 드래그 앤 드롭으로 CSS와 JS를 축소하는 OS X 용 무료 앱입니다.
Smaller는 파일을 축소하고 연결하는 OS X 도구입니다.

여기서 두 가지 유형의 GUI 응용 프로그램을 언급했습니다. 간단한 한 단계 축소 응용 프로그램은 온라인 대응 프로그램과 매우 유사합니다. 파일을 끌어서 놓기 만하면되므로 설치가 필요하지 않으므로 사용하기가 매우 쉽습니다. 즉, 그들은 사실상 사용자 정의를 제공하지 않는다..

더 큰 GUI 도구 (Prepros, Koala, Codekit)는 프로젝트를 관리하고 압축 옵션을 더 많이 제공하지만 훌륭한 기능을 제공합니다. 약간의 설정이 필요합니다.. 빠른 JS 축소는 온라인 또는 간단한 GUI 도구의 2 초 프로세스에 비해 많은 20 초의 설정을 필요로합니다..

다른 한편으로, 그들은 당신에게 일반적으로 더 많은 기능을 제공하고 자동화를 제공합니다. JS 파일을 저장할 때마다 JS 파일이 자동으로 축소되므로 수동으로 축소 할 필요가 없습니다. Javascript로 무언가를 개발한다면 이것은 분명히 갈 길입니다..

명령 행 도구

Minify는 명령 줄에서 JS를 축소하고자하지만 Grunt 또는 Gulp에서 멋진 것을 설정하고 싶지 않은 사용자를위한 것입니다.
이전에 언급 한 Uglify.js는 독립 실행 형 명령 줄 도구로도 사용할 수 있습니다.
Grunt에는 grunt-contrib-uglify라는 자바 스크립트 확장을위한 확장 기능이 있습니다.
Gulp는 또한 Uglify.js를 gulp-uglify를 통해 JS 축소 기능을 사용합니다.

커맨드 라인 도구는 리눅스 괴짜를위한 것이 아닙니다! 나는 터미널에서 위대하지 못하지만 그루터와 꿀풀 같은 것들을 설치하는 것은 위대한 문서를 통해 쉽습니다. 커맨드 라인 툴의 장점은 옵션을 출력 할 때 융통성을 발휘한다는 것입니다.

다른 한편으로, 학습 곡선의 비트. 커맨드 라인에 익숙해지기 제한적인 것을 발견 할 수있는 (많이는 아니지만) 연습이 필요합니다. 혜택을 누리기 전에.

개요

웹 개발을 처음 접한다면 처음 세 가지 GUI 도구 중 하나를 추천합니다. 그들은 당신이 일반적으로 당신의 프로젝트를 관리하고 단지 JS minification 이상을 제공 할 것을 도울 것입니다.

노련한 프로라면 아마 살펴 봐야 할 것입니다. 그르unt 또는 꿀꺽 꿀꺽 마심 이는 자동화 작업을 가장 잘 제어 할 수 있기 때문입니다. 스크립트를 빠르게 축소해야하는 경우 프로젝트를 세우지 않고, 명령 줄 도구를 사용하면 많은 시간을 절약 할 수 있습니다..

도구의 각 그룹에는 장점과 단점이 있으며 실제로는 어느 시점이나 다른 시점에서 각각 하나씩 사용하게 될 것입니다. 프로덕션 환경에서는 언제나 자바 스크립트와 CSS를 축소해야합니다.!