Optimize Core VueJS - OCG's Challenging Products (P2)

Tối ưu Web Performance

Modify Core VueJS để tối ưu performance

Sử dụng một framework để xây dựng sản phẩm là một công việc vừa khó, vừa dễ. Với các sản phẩm ở scale vừa và nhỏ, framework hầu như đáp ứng được mọi kỳ vọng của chúng ta, và đó cũng là cách chúng được xây dựng. Tuy nhiên, khi sản phẩm bắt đầu đạt lượng người dùng tương đối lớn, các framework thường bắt đầu lộ ra các yếu điểm của mình. Đó là cơ hội để đội ngũ phát triển có thể vọc, tìm hiểu sâu, tối ưu chúng.

Tại OCG, VueJS là framework chính để xây dựng hệ thống frontend (Code name: storefront next). Khi các tính năng sản phẩm được thêm vào nhiều để đáp ứng được nhu cầu người dùng thì bài toán tối ưu performance, xử lý lỗi trở nên rất cần thiết.

Để đạt được điểm Google Pagespeed > 90 với một hệ thống website phức tạp là điều rất khó - nhưng là điều OCG đang hướng tới. Việc này đòi hỏi phải hiểu rất sâu về cách hoạt động bên trong của Core VueJS, Composition API, VueX/Pinia…để biết được quá trình build/change DOM, node, hydration…và sau đó cần phải optimize chúng cho phù hợp với bài toán tại OCG.

Việc tối ưu performance cho Core VueJS là một công việc phức tạp và đòi hỏi nhiều kiến thức, kinh nghiệm. Nó bao gồm các khía cạnh sau:

• Tối ưu quá trình build DOM: Đây là một trong những yếu tố quan trọng nhất ảnh hưởng đến performance của VueJS. Có nhiều cách để tối ưu quá trình này, chẳng hạn như sử dụng virtual DOM, lazy loading, minify code,...
• Tối ưu quá trình change DOM: Quá trình này xảy ra khi các giá trị của các component thay đổi. Có thể tối ưu quá trình này bằng cách sử dụng các kỹ thuật như lazy render, memoization,...
• Tối ưu quá trình hydration: Hydration là quá trình chuyển đổi dữ liệu từ server sang client. Có thể tối ưu quá trình này bằng cách sử dụng các kỹ thuật như lazy hydration,...

Biến VueJS thành một emplate Engine

VueJS SSG là một kỹ thuật optimize tốc độ của các ứng dụng web sử dụng VueJS.

Về cơ bản, VueJS được xây dựng để làm framework phía client, nơi mà theo mặc định, các thành phần Vue tạo và thao tác DOM trực tiếp trong trình duyệt. Tuy nhiên, nó cũng cho phép render các thành phần tương tự thành HTML content trên máy chủ (SSR). Sau đó, HTML content này có thể được gửi trực tiếp đến trình duyệt và "hydrate" (bind event vào các nodes) để biến đổi đánh dấu tĩnh thành một ứng dụng tương tác đầy đủ trên phía client.

SSR là một kỹ thuật hiệu quả để tăng tốc độ tải trang, nhưng nó có một số hạn chế. Đầu tiên, SSR yêu cầu render lại toàn bộ ứng dụng mỗi khi có thay đổi dữ liệu. Điều này có thể gây ra độ trễ đáng kể nếu dữ liệu thay đổi thường xuyên. Thứ hai, SSR có thể làm tăng kích thước ứng dụng, vì nó cần phải chứa cả mã VueJS và HTML content đã được render.

SSG là một kỹ thuật có thể khắc phục được những hạn chế của SSR. SSG hoạt động bằng cách render ứng dụng thành HTML tĩnh trên máy chủ trước khi gửi nó đến trình duyệt. Điều này có nghĩa là ứng dụng chỉ cần render một lần, ngay cả khi dữ liệu thay đổi. Ngoài ra, SSG có thể giúp giảm kích thước ứng dụng, vì nó chỉ cần chứa mã VueJS.

Tuy nhiên, SSG cũng có một số thách thức riêng. Một thách thức là SSG yêu cầu các nhà phát triển phải suy nghĩ trước về dữ liệu mà họ sẽ cần để render ứng dụng. Điều này có thể khiến việc phát triển ứng dụng trở nên phức tạp hơn. Một thách thức khác là SSG có thể khó bảo trì, vì các nhà phát triển cần phải cập nhật HTML tĩnh khi dữ liệu thay đổi.

OCG đang nghiên cứu một giải pháp SSG cho VueJS. Giải pháp này sẽ giải quyết các thách thức của SSG bằng cách sử dụng các kỹ thuật mới. Ví dụ, giải pháp sẽ sử dụng một hệ thống quản lý dữ liệu để lưu trữ dữ liệu cần thiết cho SSG. Điều này sẽ giúp các nhà phát triển dễ dàng cập nhật dữ liệu và giảm thiểu nhu cầu suy nghĩ trước về dữ liệu cần thiết.

Giải pháp SSG của OCG vẫn đang trong quá trình phát triển, nhưng nó có tiềm năng mang lại những cải tiến đáng kể về tốc độ và hiệu suất cho các ứng dụng web sử dụng VueJS.