2013-03-23 14 views

Odpowiedz

108

Rura go przez uglifyjs:

browserify main.js | uglifyjs > bundle.js 

Można go zainstalować używając KMP tak:

npm install -g uglify-js 
+3

Jak to zrobić z pomrukiem przeszukiwania/obserwowania zadania? –

+1

Jeśli używasz gruntu, poleciłbym zrobić to w dwóch krokach. Najpierw skompiluj z przeglądaniem, a następnie zminimalizuj. Zaletą jest to, że możesz mieć kompilację rozwojową z mapami źródłowymi i kompilacją produkcyjną, która usuwa wszystko. – topek

+0

Tak, właśnie to zrobiłem. To właściwie 3 kroki, musisz wyczyścić plik pośredni. Dzięki! –

15

Albo użyć uglifyify przekształcać który "daje ci korzyść stosując transformację Uglify" squeeze ", zanim zostanie przetworzona przez Browserify, m Dzięki niemu możesz usunąć ścieżki martwych kodów dla warunkowych wymagań. "

+0

Nadal wymaga użycia uglify potoku pokazanego w górnej odpowiedzi. Mówią to właśnie na początku dokumentu. –

21

Począwszy od wersji 3.38.x można użyć wtyczki minifyify, aby zminimalizować pakiet i nadal można korzystać z plików typu sourcemaps. Nie jest to możliwe w przypadku innych rozwiązań - najlepsze, co możesz zrobić, to wrócić do nieskompresowanego pakietu. Minifyify mapuje całą drogę z powrotem do swoich osobnych plikach źródłowych (tak, nawet do coffeescript!)

+1

Mówi, że obsługuje przeglądarkę w wersji do przeglądania 9. Browser jest obecnie w wersji 11.0.1. Czy to pomoże? – cchamberlain

+0

[uglifyify] (https://github.com/hughsk/uglifyify) wydaje się działać dla mnie jako dobry zamiennik –

3

Nie trzeba używać wtyczek już do minify zachowując mapę źródło:

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

Po spędzeniu kilku godzin śledztwo jak budować nowe procesy budowania, myślałem, że inni mogą czerpać korzyści z tego, co zrobiłem. Odpowiadam na to stare pytanie, ponieważ wygląda na wysokie w Google.

Mój przypadek użycia jest trochę bardziej skomplikowany niż wymagał tego OP. Mam trzy scenariusze kompilacji: rozwój, testowanie, produkcja. Ponieważ większość profesjonalnych programistów będzie mieć te same wymagania, moim zdaniem wykroczenie poza zakres pierwotnego pytania jest uzasadnione.

W rozwoju używam funkcji watchify do budowania nieskompresowanego pakietu z mapą źródłową za każdym razem, gdy zmieni się plik JavaScript. Nie chcę tego uciążliwego kroku, ponieważ chcę, aby kompilacja została zakończona, zanim zmienię kartę na przeglądarkę, aby odświeżyć i nie ma to żadnej korzyści podczas tworzenia. W tym celu używam:

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

Do testowania, chcę dokładnie ten sam kod jak produkcja (np uglified), ale także chcą mapę źródłowego. I to osiągnąć z:

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

Do produkcji, kod jest skompresowany zeszpecić i nie ma źródła map.

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

Uwagi:

Użyłem tych instrukcji w systemie Windows 7, MacOS High Sierra i Ubuntu 16.04.

Przestałem używać minifyify, ponieważ nie jest już obsługiwane.

Może istnieją lepsze sposoby niż te, którymi się dzielę. Czytałem, że najwyraźniej możliwe jest uzyskanie najwyższej kompresji przez uglifowanie wszystkich plików źródłowych przed połączeniem z przeglądaniem.Jeśli masz na to więcej czasu niż ja, możesz to zbadać.

Jeśli nie masz watchify, zeszpecić-js lub browserify już zainstalowane, zainstaluj je z KMP w następujący sposób:

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

Jeżeli masz zainstalowane stare wersje polecam uaktualnić. Szczególnie brzydkie, ponieważ wprowadzono przełomową zmianę w argumentach linii poleceń, która unieważnia wiele informacji pojawiających się w Google.

Powiązane problemy