Code splitting và giải pháp tăng tốc cho ứng dụng của bạn

Khi xây dựng các ứng dụng web hoặc phát triển Zalo Mini App, chúng ta thường sử dụng các công cụ như Vite và Webpack để biên dịch source code (folder src trong hình dưới) thành output (folder www). Quá trình này được gọi là bundling hay đóng gói mã nguồn. Cùng hiểu rõ hơn về kỹ thuật code splitting và cách sử dụng nó để tối ưu hóa trong ứng dụng của mình.

Trong quá trình bundling, các công cụ bundler sẽ bắt đầu từ một điểm xuất phát là entrypoint của ứng dụng (chẳng hạn như app.ts) và tải các import vào để tạo thành một tệp output (hay còn gọi là bundle). Ví dụ cụ thể: khi app.ts của bạn import các trang index.tsx, cart.tsx, profile.tsx, và từ đó các trang lại import các thành phần button.tsx, avatar.tsx,… thì sau khi bundling tất cả các logic sẽ được đóng gói bên trong một file là index.096c827a.module.js. Việc này có thể dẫn đến một số vấn đề như:

• Thời gian tải và xử lý lâu hơn: Như bạn đã biết, đối với các ứng dụng web sử dụng cơ chế render client-side như Zalo Mini App, sau khi file HTML được tải xuống, các tệp JavaScript phải được tải về và xử lý. Quá trình này diễn ra trên main thread, nghĩa là người dùng phải đợi cho đến khi tất cả các tệp JavaScript được tải xuống và xử lý xong (bao gồm các bước parse, compile và execution) thì mới có thể tương tác với ứng dụng. Điều này có thể ảnh hưởng đến trải nghiệm người dùng.

• Người dùng sẽ phải chờ ứng dụng tải hết tất cả những chức năng mà có thể họ sẽ không bao giờ dùng đến: ví dụ, một số người dùng chỉ đơn giản muốn vào xem thông báo hoặc lướt qua danh sách các sản phẩm nhưng phải tải hết tất cả những logic liên quan đến đặt hàng, thanh toán hay thậm chí là những chức năng mà ở hạng thành viên hiện tại của họ không thể truy cập được.

Code splitting

Để giải quyết vấn đề này, chúng ta có thể sử dụng kỹ thuật code splitting. Kỹ thuật này cho phép tách một bundler lớn thành nhiều module nhỏ hơn, giúp giảm thiểu thời gian tải và tăng tốc độ tải trang. Các module được tách ra sẽ có cơ chế tự động import khi cần thiết, dựa trên quyết định của lập trình viên về cách tách và nơi tách các module.

Ví dụ, để code splitting component/page FinishOrder, thay vì

import FinishOrder from “./pages/finish-order”;

ta chỉ cần đổi thành

const FinishOrder = React.lazy(() => import("./pages/finish-order"));

thì khi đó component FinishOrder sẽ được tách ra thành module riêng, và sẽ được tự động tải về chỉ khi nào cần dùng đến:

<Suspense fallback="Đang tải trang đặt hàng, bạn đợi xíu nhé…">
  <FinishOrder />
</Suspense>

Code splitting có thể áp dụng với mọi thứ

Lazy load một component hoặc một page là trường hợp thường gặp khi thực hiện code splitting. Tuy nhiên điều đó không có nghĩa component là thứ duy nhất có thể lazy load. Bạn có thể lazy load một hàm, thư viện hoặc đơn giản là một const nếu chúng quá nặng.

Để thực hiện code splitting các thành phần này, bạn chỉ cần sử dụng syntax dynamic import tương tự như trên. Tuy nhiên, vì cơ chế của dynamic import là bất đồng bộ, nên khi chuyển từ import thông thường sang dạng này bạn sẽ phải đổi lại khá nhiều logic bên trong các component. Có một mẹo khá hay giúp bạn có thể giữ nguyên các logic synchronous bên trong component như lúc chưa code splitting đó là kết hợp với recoil asynchronous selector:

Ví dụ, lúc chưa code splitting:

import { allCitiesInVietnam } from "constants/address";

function CheckoutPage() {
    const [currentCity, setCurrentCity] = useState(allCitiesInVietnam[0]);
    ...

const allCitiesState = selector({
  key: "allCities",
  get: () => import("constants/address").then((module) => module.allCitiesInVietnam),
})

function CheckoutPage() {
    const allCitiesInVietnam = useRecoilValue(allCitiesState);
    const [currentCity, setCurrentCity] = useState(allCitiesInVietnam[0]);
    ...

Một vài tài liệu hướng dẫn thiết lập code splitting đối với các thư viện/framework khác không phải React:

• Vue.js
• Flutter

Code splitting là một kỹ thuật quan trọng trong việc tối ưu hóa ứng dụng web nói chung và Zalo Mini App nói riêng. Tuy nhiên, để có thể áp dụng kỹ thuật này, các lập trình viên cần phải tìm hiểu và áp dụng đúng cách. Chúng tôi hy vọng bài viết này đã giúp cho các bạn hiểu rõ hơn về kỹ thuật code splitting và cách sử dụng nó để tối ưu hóa trong ứng dụng của mình.

nguồn: https://mini.zalo.me/blog/giam-kich-thuoc-zalo-mini-app-va-toi-uu-hoa-thoi-gian-tai

THÔNG TIN  LIÊN HỆ 

SDT: 0977383456

EMAIL:  kbtech.technology@gmail.com

WEBSITE :  kbtech.com.vn

ĐĂNG KÝ ZALO OA: dangkyzalooa.com