Mẹo tối ưu Shopify: Tránh thừa whitespace

Rate this post

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

Whitespace in Basic Liquid

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ể).

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...
Git

18/12/2022

Xử lý lỗi Git không thể tiến hành merge do merge.renamelimit
Khi bạn tiến hành merge nhánh phụ vào nhánh chính hoặc lên nhánh production, có thể xung đột xảy ra...