Trong ngôn ngữ của Liquid, bạn có biết cách để tránh tạo ra các whitespace dẫn tới kém tối ưu hoá khi template được render ra không?
Whitespace là gì?
Whitespace là những khoảng trống được render ra khi code Liquid ta sử dụng không có output markup ra.
Hãy lấy ví dụ, chẳng hạn ta có 2 dòng code như sau:
{% assign title = 'Title' %}
<h1 class="page-title">{{ title }}</h1>
Thì khi render template ra sẽ xuất hiện thành 2 dòng (dòng đầu tiên là một line space trống):
// 1 whitespace rỗng nằm ở đây <h1 class="page-title">Title</h1>
Cách xử lý whitespace như thế nào?
Ngôn ngữ Liquid của Shopify cung cấp thêm các cách viết để loại trừ whitespace như sau:
{%- -%}
Ví dụ:
{%- if article.image -%}
<img src="{{ article.image.src }}" alt="{{ article.image.alt }}">
{%- endif -%}
Thì khi output ra sẽ chỉ có 1 dòng chứa line img ở trên mà thôi.
Các trường hợp không cần loại trừ whitespace
1. Endschema
Bạn không thể dùng với endschema. Kết thúc của schema thì không được sử dụng thêm dấu “-” vào đâu nhé.
{%- schema -%}
{% endschema -%}
2. Inline code
Không cần thiết phải thêm vào các condition nằm inline trong code
Ví dụ:
<div class="hero {% if class %} {{ class }}{% endif %}"></div>
Tài liệu tham khảo
Kết luận
Đây là một thói quen bạn nên luyện tập để hạn chế render whitespace thừa dẫn tới khi render bị thừa nhiều và làm template nặng hơn (dù không đáng kể).
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
