14 công cụ để giảm thiểu Javascript

Thu nhỏ Javascript là một kỹ thuật ngưng tụ kịch bản của bạn thành một dấu chân nhỏ hơn nhiều. Bạn mất khả năng đọc của con người nhưng bạn bảo tồn băng thông đáng kể - cuối cùng, Javascript có nghĩa là cho trình duyệt của bạn không dành cho người dùng của bạn.

Hầu hết các trang web sản xuất sử dụng tối thiểu hóa Javascript nhưng cách thức đạt được điều này rất khác nhau. Từ các trình chuyển đổi trực tuyến đơn giản đến các công cụ GUI toàn diện hơn đến các giao diện dòng lệnh, các tùy chọn của chúng tôi khá đa dạng. Trong bài viết này, chúng tôi sẽ xem xét cách thức thu nhỏ Javascript hoạt động, làm thế nào chúng ta có thể xây dựng nó vào quy trình công việc của mình và những ưu và nhược điểm của việc giảm thiểu là gì.

Làm thế nào tối thiểu hóa hoạt động

Cách tốt nhất để tìm hiểu điều gì xảy ra khi bạn thu nhỏ mã của mình là xem qua Kho lưu trữ Github của UglifyJS. Kịch bản này được sử dụng trong nhiều trình chuyển đổi trực tuyến cũng như các công cụ GUI và công cụ dòng lệnh như Grunt. Dưới đây là một số biến đổi được áp dụng để làm cho mã của bạn ngắn hơn:

Loại bỏ không gian không cần thiết
Rút ngắn tên biến, thường là ký tự đơn
Tham gia khai báo var liên tiếp
Chuyển đổi mảng thành các đối tượng nếu có thể
Tối ưu hóa nếu báo cáo
Tính biểu thức hằng đơn giản
v.v..

Ví dụ nhanh, đây là một chức năng chủ yếu viết một số văn bản đã cho ra.

 chức năng hello (văn bản) document.write (văn bản);

xin chào ('Chào mừng đến với bài viết');

Hãy xem điều gì xảy ra khi chúng ta giảm thiểu điều này. Lưu ý loại bỏ khoảng trắng và thụt lề và rút ngắn biến văn bản.

chức năng hello (e) document.write (e) xin chào ("Chào mừng đến với bài viết")

Công cụ thu nhỏ Javascript

Các công cụ được sử dụng để thu nhỏ Javascript có thể được phân loại thành 3 nhóm: công cụ trực tuyến, công cụ GUI và công cụ dòng lệnh.

Với các công cụ trực tuyến, vấn đề thường là dán mã của bạn và sao chép kết quả ngay lập tức.
Các công cụ GUI thường chứa nhiều chức năng hơn; Thu nhỏ JS chỉ là một phần nhỏ trong những gì họ làm.
Các công cụ dòng lệnh cũng thường toàn diện hơn, cung cấp sự thu nhỏ dưới dạng một mô-đun.

Công cụ trực tuyến

javascript-minifier.com là một công cụ đẹp mắt với API
Trình nén YUI trực tuyến là một công cụ mạnh hơn sử dụng trình nén YUI, với rất nhiều tùy chọn và khả năng thu nhỏ CSS.
jscompress.com là một công cụ khai thác không rườm rà nhưng nó hoàn thành công việc
jsmini.com là một tùy chọn đơn giản nhưng hoàn toàn có thể sử dụng được

Điều tuyệt vời về các công cụ trực tuyến là tốc độ mà bạn có thể làm việc với chúng. GUI và các công cụ dòng lệnh phức tạp giảm thiểu nhanh hơn nhưng bạn cần phải có một dự án được thiết lập để nó hoạt động chính xác. Nhược điểm của các công cụ này là chúng chủ yếu cung cấp ít hoặc không tùy chỉnh, ít nhất là khi so sánh với các công cụ dòng lệnh.

Công cụ GUI

Koala là một công cụ miễn phí để biên soạn LESS, SASS, thu nhỏ JS và nhiều hơn nữa
Prepros là một ứng dụng trả phí đa nền tảng cung cấp cho bạn nhiều tùy chọn hơn nữa
Codekit là ứng dụng tôi chọn. Đây là một ứng dụng chỉ dành cho máy Mac trả phí, cung cấp dịch vụ biên dịch mã, thu nhỏ, máy chủ xem trước, quản lý gói bower và nhiều hơn nữa
AjaxminGui là một công cụ Windows đơn mục đích miễn phí để thu nhỏ JS của bạn
UltraMinifier là một ứng dụng miễn phí dành cho OS X, giúp thu nhỏ CSS và JS bằng cách kéo và thả
Smaller là một công cụ OS X giúp thu nhỏ và ghép các tệp cho bạn

Tôi đã đề cập đến hai loại ứng dụng GUI ở đây. Các ứng dụng rút gọn một bước đơn giản giống như các đối tác trực tuyến của chúng. Chúng cực kỳ nhanh để sử dụng vì bạn chỉ có thể kéo và thả tệp vào chúng, không cần thiết lập. Điều đó nói rằng, họ cung cấp hầu như không có tùy chỉnh.

Các công cụ GUI lớn hơn (Prepros, Koala, Codekit) rất tốt trong việc quản lý các dự án và cung cấp cho bạn thêm một số tùy chọn để nén nhưng chúng thực hiện cần một chút thiết lập. Việc thu nhỏ JS nhanh sẽ mất khoảng 20 giây thiết lập, rất nhiều so với quy trình 2 giây của các công cụ GUI trực tuyến hoặc đơn giản.

Mặt khác, họ cung cấp cho bạn nhiều tính năng nói chung và cung cấp cho bạn tự động hóa. Các tệp JS của bạn sẽ được thu nhỏ mỗi khi bạn lưu chúng, không cần phải thu nhỏ chúng theo cách thủ công. Nếu bạn đang phát triển một cái gì đó trong Javascript thì đây chắc chắn là cách để đi.

Công cụ dòng lệnh

Minify dành cho những người muốn thu nhỏ JS từ dòng lệnh nhưng không muốn thiết lập bất cứ thứ gì lạ mắt trong Grunt hoặc Gulp
Uglify.js mà chúng tôi đã đề cập trước đây cũng có sẵn dưới dạng công cụ dòng lệnh độc lập
Grunt có một phần mở rộng để thu nhỏ Javascript có tên là grunt-contrib-uglify
Gulp cũng có tối thiểu hóa JS bằng cách sử dụng Uglify.js thông qua gulp-uglify

Các công cụ dòng lệnh không chỉ dành cho các chuyên viên máy tính Linux! Tôi không tuyệt vời ở nhà ga nhưng việc thiết lập những thứ như Grunt và Gulp rất dễ dàng thông qua tài liệu tuyệt vời của họ. Ưu điểm của các công cụ dòng lệnh là mức độ linh hoạt tuyệt vời mà bạn có từ các tùy chọn đến đầu ra.

Mặt khác, có một một chút của một đường cong học tập. Làm quen với dòng lệnh thực hiện một số (không nhiều) thực hành mà bạn sẽ thấy hạn chế trước khi bạn bắt đầu tận hưởng những lợi ích.

Tổng quan

Nếu bạn chưa quen với phát triển web, tôi sẽ đề xuất một trong ba công cụ GUI đầu tiên. Họ sẽ giúp bạn quản lý các dự án của bạn nói chung và cung cấp nhiều hơn là chỉ thu nhỏ JS.

Nếu bạn là một chuyên gia dày dạn, có lẽ bạn nên xem xét Grunt hoặc Gulp vì chúng cung cấp sự kiểm soát nhiều nhất đối với các nhiệm vụ tự động hóa. Nếu bạn cần giảm thiểu một tập lệnh một cách nhanh chóng mà không cần thiết lập một dự án, các công cụ dòng lệnh có thể giúp bạn tiết kiệm rất nhiều thời gian.

Mỗi nhóm công cụ đều có ưu và nhược điểm của chúng và trong thực tế, có thể bạn sẽ kết thúc việc sử dụng từng công cụ vào lúc này hay lúc khác. Hãy nhớ rằng khi ở trong môi trường sản xuất, bạn phải luôn thu nhỏ Javascript và CSS của mình!