Code-Splitting: Chìa khóa giúp ứng dụng Discord trở lên mượt mà

Discord là một ứng dụng cho phép người dùng giao tiếp lẫn nhau bằng giọng nói (voice chat) hoặc bằng văn bản (text chat) với hơn 10 triệu người dùng hoạt động mỗi ngày.

Cùng Sydexa khám phá về cách Discord sử dụng code-splitting để cải thiện hiệu suất nha.

Chúng mình có tạo Group cho các bạn cùng chia sẻ và học hỏi về thiết kế hệ thống nha 😄😄😄

Các bạn tham gia để gây dựng cộng đồng System Design Việt Nam thật lớn mạnh nhé 😍😍😍

Cộng Đồng System Design Việt Nam: https://www.facebook.com/groups/sydexa

Kênh TikTok: https://www.tiktok.com/@sydexa.com

Software Bloat (Phình code)

Software bloat là quá trình mà các phiên bản kế tiếp của một phần mềm trở nên chậm hơn rõ rệt, sử dụng nhiều bộ nhớ, dung lượng ổ cứng hay nhiều tài nguyên CPU hơn hoặc yêu cầu phần cứng cao hơn phiên bản trước, trong khi chỉ mang lại những tính năng cải tiến thì không đáng kể hoặc là phát triển nhiều tính năng quá mức cần thiết. 😰 😰 😰

Khi ứng dụng phục vụ một thị trường lớn, đa dạng với nhiều yêu cầu khác nhau, việc bị phình tính năng (feature creep) là điều khó tránh khỏi. Tuy nhiên, hầu hết người dùng sẽ thấy rằng họ chỉ cần một phần nhỏ các tính năng mà ứng dụng cung cấp, và coi những tính năng còn lại là không cần thiết mặc dù có người dùng khác lại cần đến chúng.

Một phương pháp hiệu quả để giảm thiểu sự phình to của phần mềm là tiến hành các bài split test, nhằm xác định những tính năng nào được người dùng ưa chuộng và sử dụng thường xuyên nhất. Bằng cách này, có thể dễ dàng loại bỏ các tính năng ít được sử dụng hoặc không cần thiết.

Tuy nhiên, không thể hoàn toàn tránh khỏi sự phức tạp cơ bản của ứng dụng. Vì vậy, việc áp dụng kỹ thuật phân chia code (code splitting) trở thành một giải pháp tiềm năng để làm giảm sự phình to mà không ảnh hưởng đến khả năng mở rộng tính năng mới. Discord đã sử dụng chiến lược này, cho phép họ cải thiện hiệu suất và duy trì sự mạch lạc khi tiếp tục phát triển và bổ sung các tính năng mới cho ứng dụng của mình.

Code Split 🍽

Code split là phương pháp giúp tối ưu việc load một ứng dụng hoặc trang web bằng các chia nhỏ code thành các gói riêng biệt có thể load độc lập với nhau. Điều này giúp ứng dụng chỉ cần load phần code cần thiết cho các thao tác cụ thể, đồng thời cho phép load thêm các gói khác theo yêu cầu, qua đó nâng cao hiệu suất, đặc biệt trong việc giảm thời gian khi khởi chạy ứng dụng hoặc trang web.

Discord cần có các file code và styles để hoạt động, nhưng việc xử lý chúng cần sử dụng nhiều bộ nhớ và tài nguyên CPU. Do đó, máy chủ thực hiện phân chia và chỉ gửi những phần tối thiểu cần thiết cho hoạt động của Discord. Điều này giúp tăng tốc độ của ứng dụng Discord và giảm lượng tài nguyên tiêu thụ.

Ứng dụng Discord chỉ load những file JavaScript, CSS, font và image thiết yếu khi khởi chạy ứng dụng. Và khi người dùng điều hướng qua lại trong Discord, máy chủ sẽ tiếp tục gửi các file còn lại.

Có rất nhiều phương pháp để thực hiện phân chia code. Một điểm bắt đầu lý tưởng cho việc phân chia code là tại cấp độ định tuyến (Route level) của ứng dụng. Route level trong ngữ cảnh của phát triển web và ứng dụng, ám chỉ việc quản lý các đường dẫn hoặc URL trong một ứng dụng. Mỗi đường dẫn hoặc URL đại diện cho một route khác nhau. Các route sẽ được các công cụ tự động hóa như Webpack tổ chức thành các chunks. Mỗi chunk tương ứng với một phần của ứng dụng (ví dụ, trang chủ, trang đàm thoại, v.v.). Khi người dùng chuyển từ trang này sang trang khác, chỉ các chunk cần thiết cho trang đó sẽ được load lên, giúp giảm thời gian và tiết kiệm tài nguyên.

Untitled 2.png

Các file có thể được áp dụng phương pháp code split bao gồm:

Stylesheets
Translations
Fonts

Các phần này sau đó sẽ được tải lên theo phương pháp lazy-loaded, nghĩa là các file chỉ được tải khi có nhu cầu sử dụng. Discord chỉ tải những file translation (tức là, file chứa nội dung đã được dịch sang các ngôn ngữ khác nhau) mà nó cần ở thời điểm cụ thể.

Thay vì tải tất cả các file translation cho mọi ngôn ngữ ngay từ đầu, Discord chỉ tải file cho ngôn ngữ mà người dùng đang sử dụng hoặc yêu cầu. Nhờ vào điều này, Discord có thể dễ dàng hỗ trợ thêm nhiều ngôn ngữ bằng cách thêm file translation mới mà không làm ảnh hưởng đến tốc độ tải trang hoặc hiệu suất của ứng dụng

Một số lợi ích của code split:

Tăng hiệu suất cho người dùng trên các thiết bị di động khi kết nối mạng không ổn định
Giảm bớt chi phí sử dụng dịch vụ CDN bằng cách giảm lượng dữ liệu cần truyền tải
Nâng cao khả năng SEO do trang web tải nhanh hơn

CDN sẽ thu phí dựa trên băng thông và số lượng request HTTP. Vì vậy, việc giữ cân bằng giữa số lượng request và lượng băng thông tiêu thụ là rất quan trọng.

Tuy nhiên, việc áp dụng kỹ thuật code split cũng có một số hạn chế:

Tăng chi phí xử lý do số lượng request tới máy chủ tăng lên
Sự chậm trễ trong phản hồi có thể xảy ra do lượng lớn yêu cầu được gửi đi

Code splitting thông qua truyền tải HTTP là một giải pháp tiềm năng giúp giảm bớt chi phí xử lý và cải thiện thời gian phản hồi.

Điều quan trọng nhất khi áp dụng phương pháp code split là có thể mở rộng nhiều tính năng mới cho ứng dụng mà không làm ảnh hưởng đến hiệu suất hoặc làm phình code.

Sydexa.com xin hẹn gặp lại các bạn ở các bài viết thú vị hơn nha