Blog Javascript Thiết kế web

Rollup.js – Công cụ đóng gói module Javascript

Rollup.js là công cụ đóng gói module Javascript thế hệ tiếp theo. Bằng cách sử dụng Rollup bạn có thể xây dựng ứng dụng hoặc thư việc sử dụng các module ES2015, sau đó đóng gói chúng thành một file một cách hiệu quả.

Rollup.js – Giới thiệu

Rollup cho phép bạn code ứng dụng sử dụng các module ES2015, sau đó nó sẽ kết hợp tất cả các module thành một file nhằm giảm số lượng request http và cải thiện thời gian tải trang web. Mục đích của Rollup là trở nên nhanh và tạo các đoạn code rõ ràng và hiệu quả hơn bất kỳ công cụ đóng gói khác.

Rollup.js đóng gói tất cả các module thành một file duy nhất

Bạn sẽ có được các lợi ích phân tích của ES2015 có nghĩa các modules được import vào sẽ được quyết định lúc biên dịch (trước khi thực thi) và bất kì exports nào không sử dụng sẽ được loại bỏ trước khi chương trình chạy. Vì vậy chúng ta sẽ tiết kiệm được dung lượng và giảm sự quá tải của đoạn mã.

Một tính năng tuyệt vời khác là Tree-shaking, sẽ loại bỏ các export không sử dụng trong gói. Do đó, thay vì import nguyên module, Tree-shaking cho phép bạn import phần mà bạn cần sử dụng.

Hãy xem ví dụ sau đây trong file greetings.js, giả sử chúng ta có hai hàm:

Và chúng ta import tất cả các hàm này trong app.js, sau đó chúng ta chỉ sử dụng sayHello và log vào console:

Kết quả output của file, bằng Tree-shaking, Rollup sẽ loại bỏ hàm sayHi bởi vì nó không được sử dụng: