jampack là gì?
jampack không phải là bundler hay framework, mà là một công cụ hậu xử lý giúp tối ưu đầu ra của trình tạo website tĩnh (SSG) để cải thiện trải nghiệm người dùng và điểm Core Web Vitals.
jampack có thể làm gì?
- Hình ảnh trong thẻ
<img> được chuyển thành dạng responsive để hỗ trợ nhiều độ phân giải khác nhau, đồng thời được thêm các thuộc tính loading="lazy" và decoding="async" để cải thiện hiệu năng.
- Ảnh được chuyển thành ảnh responsive dùng thẻ
<picture> để chứa nhiều định dạng hình ảnh, đồng thời hỗ trợ cả định dạng AVIF.
- Ảnh từ CDN được chuyển thành dạng responsive, cung cấp hình ảnh ở nhiều độ phân giải khác nhau thông qua
srcset.
- Có thể tải xuống ảnh bên ngoài để tối ưu, và lưu các tệp ảnh đã tối ưu trong thư mục
_jampack.
- Những hình ảnh hiển thị ngay trên màn hình đầu tiên (above-the-fold) được tải với mức ưu tiên cao, còn những hình ảnh chỉ xuất hiện khi cuộn xuống (below-the-fold) sẽ được lazy-load.
CSS quan trọng nội tuyến
- Để ngăn hiện tượng FOUC (Flash of Unstyled Content) có thể xảy ra trong lúc stylesheet đang được tải xuống và phân tích,
jampack sẽ inline phần CSS quan trọng và trì hoãn tải phần CSS còn lại.
Prefetch liên kết
- Tự động prefetch các liên kết trong trang để cải thiện tốc độ điều hướng tới các trang tiếp theo. Nhờ quicklink, có thể prefetch động các liên kết đi vào viewport.
Nén mọi tài nguyên
jampack sẽ nén tất cả các tài nguyên chưa bị đụng tới trong lượt xử lý thứ hai, đồng thời giữ nguyên cùng tên và định dạng. Công cụ sử dụng các bộ nén riêng cho từng phần mở rộng tệp khác nhau.
Và còn nhiều tính năng khác!
jampack có thể tối ưu website tĩnh trong thư mục dist bằng lệnh npx @divriots/jampack ./dist.
Các trường hợp sử dụng jampack
jampack đang được dùng trên nhiều website như trang web của ‹div›RIOTS, keycloak.ch, bayjs.org và nhiều trang khác.
Nguồn gốc tên gọi jampack
jam: bắt nguồn từ Jamstack.pack: gợi nhớ tới các executable packer của thập niên 90.
Giấy phép
- Phần mềm này được phát hành theo các điều khoản của giấy phép MIT.
Ý kiến của GN⁺
jampack có thể là một công cụ hữu ích cho các kỹ sư phần mềm mới vào nghề quan tâm nhiều tới tối ưu hiệu năng web. Đặc biệt, nó có vẻ sẽ hữu ích với các nhà phát triển coi trọng những chỉ số hiệu năng như Core Web Vitals.- Công cụ này không chỉ tối ưu hình ảnh mà còn cung cấp nhiều tính năng tối ưu web khác như nén CSS và JavaScript, giúp rút ngắn thời gian tải trang và cải thiện trải nghiệm người dùng.
- Xét từ góc nhìn phê phán, việc dùng các công cụ như
jampack có thể làm tăng độ phức tạp của website, và nếu dùng sai thì ngược lại còn có thể gây ra vấn đề hiệu năng. Vì vậy, cần kiểm thử và rà soát kỹ trước khi sử dụng.
- Đã có sẵn nhiều công cụ cho tối ưu hiệu năng web, chẳng hạn như Lighthouse của Google hay WebPageTest. Có thể dùng
jampack cùng với các công cụ này để phân tích và cải thiện hiệu năng website một cách toàn diện.
- Khi áp dụng
jampack, cần xây dựng chiến lược tối ưu dựa trên cấu trúc website và tech stack đang sử dụng. Ngoài ra, dùng công cụ mã nguồn mở có lợi thế là nhận được hỗ trợ từ cộng đồng, nhưng cũng cần cân nhắc trách nhiệm đối với tính bền vững và việc bảo trì dự án.
1 bình luận
Bình luận trên Hacker News
Một người dùng cho biết họ đã tìm thấy đúng thứ mình cần. Trước đây họ tự tối ưu hóa ảnh bằng script riêng dùng Sharp, nhưng sau khi dùng Jampack thì không còn cần nữa. Sau khi build trang tĩnh Quarto rồi chạy Jampack, kích thước thư mục giảm 32%, và đến giờ vẫn chưa thấy nhược điểm đáng kể nào. Họ cũng chia sẻ các chỉ số hiệu năng trước và sau khi dùng Jampack bằng PageSpeed Insights.
Một người dùng khác nói tính năng này khiến họ nhớ tới module PageSpeed cho Apache và Nginx.
Có người nói họ thích Jampack và sẵn sàng dùng nó, đồng thời hỏi những người có ý kiến phê phán sẽ chỉ ra điểm yếu nào. Người này cho rằng Jampack làm công việc tương tự như biên dịch mã C thành assembly được tối ưu hóa, tức là xử lý những việc mà cá nhân họ không muốn tự làm.
Một người dùng khác quan tâm đến khái niệm xác định CSS "quan trọng" rồi inline nó. Họ từng hy vọng có một cách mang tính nguyên tắc để xác định CSS không quan trọng, nhưng thư viện được dùng có vẻ chọn cách render trang rồi cố gắng suy ra tốt nhất có thể quy tắc nào là quan trọng.
Có người muốn thấy cách chọn lọc từng phần font theo dải Unicode của đầu ra SSG, và cố định các trục OpenType dựa trên
font-feature-settingsđược định nghĩa trong CSS.Một người dùng thấy Jampack rất ngầu và hỏi liệu có thể tạo Docker container để đơn giản hóa việc sử dụng cho những ai ngại dùng Node.js hay không.
Có người nói họ ghét bố cục trang web và không muốn học nó, nhưng đôi khi vẫn phải làm, nên Jampack trông rất tuyệt.
Có người hỏi về các static site generator đang được dùng trong môi trường production thực tế. Họ nghĩ có thể dùng các công cụ như vậy để tối ưu thêm đầu ra. Ví dụ, họ đã thử cả ngày để chuyển một website React của Divjoy thành HTML đơn giản có thể phục vụ từ một S3 bucket nhưng vẫn gặp khó khăn. Họ cần một công cụ có thể tự động triển khai lên S3 bucket và trỏ domain vào đó.
Có người nhận xét Jampack có vẻ bao phủ nhiều trường hợp sử dụng mà SSG và các plugin của nó thường cố xử lý. Họ tự hỏi liệu lý do chọn Astro hay Eleventy có phải là vì thích một bước hậu xử lý sau build tách biệt hay không. Có thể tồn tại sự đánh đổi giữa việc rebuild nhanh trong lúc phát triển và nguy cơ bỏ sót các lỗi tinh vi do việc thêm những thứ như khai báo chiều rộng ảnh gây ra.
Có người bày tỏ lời cảm ơn tới những ai đã gửi ví dụ thực tế qua email. Họ nói mình rất trân trọng sự hỗ trợ đó.