DEV Community: B20DCCN511_Nguyễn Đoàn Đức Phúc

Lazy load chỉ dùng cho Image ?

B20DCCN511_Nguyễn Đoàn Đức Phúc — Tue, 31 Dec 2024 06:32:26 +0000

Bài viết này sẽ chỉ cho bạn cách sử dụng lazyload để website chạy vù vù 💨

Có lẽ khi anh em nhắc đến việc sử dụng lazyload cho trang web của mình đa số sẽ đều nghĩ đến việc sử dụng cho image. Thực tế không chỉ sử dụng cho riêng image mà lazyload còn được sử dụng trên nhiều các tài nguyên khác nhau.

Để bắt đầu chúng ta cần tìm hiểu về bản chất lazyload là gì ?

Lazyload (tải lười) là trì hoãn việc tải tài nguyên cho đến khi chúng thực sự cần thiết.
Trong quá trình trau dồi kinh nghiệm và tìm tòi thông tin trên mạng về lĩnh vực lập trình frontend của mình, mình có đọc được một nguyên tắc tối ưu về performance rất hay: "Only load what users want and prefetch what users will want"
Chính điều này về sau đã in sâu vào tiềm thức của mình khi viết code, nó giúp cho các đoạn mã của mình được nâng cao chất lượng và tốc độ trang web cải thiện rất nhiều.

Tại sao lại cải thiện tốc độ ?

Chỉ load những thứ user cần tức là load càng ít càng tốt. Load ít thì tốc độ tải trang cao. Tốc độ tải trang cao thì việc tải các file tĩnh html, css, js nhanh. Việc parse các đoạn mã JS bỏ vào engine cũng vì thế mà nhanh hơn.

Định nghĩa thì đơn giản dễ hiểu như vậy tuy nhiên áp dụng vào thực tế thì sẽ như thế nào ?
Lúc mình còn ít kinh nghiệm, mình thường bỏ quên các bước tối ưu cho các layout như Popover

Hay call cả thư viện clipboard.js chỉ để xử lý một cái hàm duy nhất là copy dòng text

Rồi những thẻ image nằm dưới cuối trang

Mình dám cá rằng khi anh em làm việc với framework 99% anh em có ít kinh nghiệm sẽ đều đang ném thẳng những đoạn code đó vào mặt user của mình.

Sau này khi tìm hiểu được nhiều kiến thức hơn, mình thấy được rằng chúng ta có thể đẩy rất nhiều các user interactive ra lazyload.
Nó có thể là:

Modal chỉ xuất hiện khi user click vào một button nào đó
Popover/ Tooltip xuất hiện khi hover
Action copy link
Image khi scroll xuống dưới

Nếu tư duy theo hướng trang web là những layer xếp chồng lên nhau thì những layer bên trên có thể lazy được

Cụ thể hơn chúng ta sẽ đi vào ví dụ:

Ví dụ với Component

Ở đây mình sẽ tách riêng component Login

// File LoginModal.tsx

import { useState } from 'react';
import { Modal, Input, Button } from 'antd';

const LoginModal = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

    return (
        <Modal>
            <Input placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
            <Input placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
            <Button>Login</Button>
        </Modal>
    );
}

export default LoginModal;

Sau đó mình sẽ lazy import component

import { Suspense, useState } from "react";
const LoginModal = React.lazy(() => import('components/LoginModal'));

const HomePage = () => {
  const [showLoginModal, setShowLoginModal] = useState(false);

  return (
    <div>
      Some other stuff here

      {showLoginModal && <Suspense fallback={null}>
        <LoginModal />
      </Suspense>}
    </div>
  );
};

export default HomePage;

Xong lúc này component Login sẽ chỉ được load hoàn toàn khi trạng thái showLoginModal = true

Ví dụ tiếp theo là đối với những action cần cài lib

import { Button } from "antd";

const PostItem = () => {
  const handleCopy = (e) =>{
    import('clipboard.js').then(module => {
      module.default('Hello world from thanhle.blog')
    }).catch(error => {
      console.log(error);
    })
  }
  return (
    <div>
      Some other stuff here

      <Button onClick={handleCopy}>Copy to clipboard</Button>
    </div>
  );
};

export default PostItem;

Có thể thấy rằng clipboard.js chỉ được load khi user click vào button thay vì được load cùng lúc tải function component

Khi scroll image

<img src="https://thanhle.blog/_next/image?url=%2Fme.jpeg&w=128&q=75" loading="lazy" alt="Thanh Le" />

Dạng này thì quá quen thuộc rồi

Lợi ích là thế tuy nhiên chúng ta sẽ phải đánh đổi gì khi sử dụng ?

Cái gì cũng có hai mặt và sự đánh đổi
Để đổi lấy việc

giảm bundle file cho user
tốc độ load trang
SEO
tăng điểm bigspeed

Bạn phải trả giá:

User phải chờ một chút khi có action
Code nhiều hơn, dài dòng hơn, khó maintain

Thế nên mình rút ra kinh nghiệm cho bản thân:
Chỉ sử dụng cho action mà user hiếm khi dùng tới.
Dùng cho web chú trọng SEO hoặc những interactive phức tạp

Trên đây là chia sẻ của mình về việc tối ưu hiệu quả sử dụng lazy load. Chúc các bạn thực hành thành công 😉.

Những Tip đơn giản giúp đoạn code trở nên CLEAR và MAINTAIN dễ hơn

B20DCCN511_Nguyễn Đoàn Đức Phúc — Mon, 30 Dec 2024 13:59:37 +0000

Với kinh nghiệm của bản thân khi làm một lập trình viên frontend, tôi thường xây dựng những thói quen riêng khi viết code để giúp đoạn mã trở nên linh hoạt và nâng cao khả năng đọc cũng như bảo trì mã.
Đây hoàn toàn là những mẹo rất đơn giản nhưng vô cũng hữu ích mà tôi muốn chia sẻ để bạn hoàn toàn có thể hiểu ngay từ những cái nhìn đầu tiên.

Kỹ thuật 1: Giảm số lượng câu lệnh `if-else`

Mỗi khi viết mã gì đó có sử dụng nhiều hơn 2 lần if-else chúng ta cần phải cân nhắc xem có cách nào viết mã tối ưu hơn không. Ví dụ đơn giản như sau:

function getPrice(item) {
    if (item === 'iPHONE') return 1.0;
    else if (item === 'Samsung') return 0.5;
    else if (item === 'Xiaomi') return 0.75;
    // more ...
}

Trong ví dụ này tôi đang viết một hàm lấy giá của các hãng điện thoại, nếu như tôi muốn thêm giá của điện thoại oppo, tôi sẽ cần phải thêm một nhánh if-else, hoặc tôi muốn sửa đổi giá của chiếc điện thoại Xiaomi tôi sẽ phải mất công đi tìm vị trí của chiếc điện thoại xiaomi trong thân hàm của mình.
Việc viết mã như trên có thể khiến cho mã dễ gặp những lỗi như dài dòng, khó đọc, khó tìm kiếm và mở rộng.
Nhưng đừng lo tôi sẽ chỉ cho bạn cách viết đúng mà không vi phạm nguyên tắc DRY. Chúng ta sẽ sử dụng một object để lưu lại giá cho các sản phẩm thay vì sử dụng một chuỗi if-else-if

function getPrice(item) {
    const prices = {
        'iPHONE': 1.0,
        'Samsung': 0.5,
        'Xiaomi': 0.75,
        'Oppo': 0.6
    };

    return prices[item] || 0;  // Trả về giá trị hoặc 0 nếu không có sản phẩm
}

Ví dụ cải tiến trên chúng ta đã có thể đọc mã một cách clear hơn, hay khi muốn thay đổi một giá của một sản phẩm chúng ta không cần phải thay đổi logic cốt lõi của hàm getPrice().

Kỹ thuật 2: Kỹ thuật Pipelining giảm số vòng lặp không cần thiết

const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

const group1 = [];
for (let i = 0; i < phones .length; i++) {
    if (phones[i].group === 1) {
        group1.push(phones [i].name);
    }
}

Đây là một cách làm truyền thống, bạn có thể dùng vòng lặp for để lặp qua từng phần tử trong mảng và kiểm tra xem phần tử nào đáp ứng điều kiện sau đó thêm nó vào mảng kết quả.
Mặc dù phương pháp trên không sai, tuy nhiên việc viết mã như vậy có thể khiến cho mã dài dòng và khó đọc hơn. Thay vào đó chúng ta có thể sử dụng các hàm thông dụng như filter và map để giúp cho đoạn mã ngắn gọn và tăng cường về mặt ngữ nghĩa.

const group1 = phones
    .filter(phone => phone.group === 1)
    .map(phone => phone.name);

Kỹ thuật 3: Sử dụng find để thay thế các vòng lặp trùng lặp

Tiếp tục với ví dụ về mảng điện thoại bên trên. Khi đó việc sử dụng find cho thấy sự tiện lợi rõ ràng


const phones = [
    { name: 'Apple', group: 1 },
    { name: 'Samsung', group: 2 },
    { name: 'Xiaomi', group: 1 },
    // more items...
];

// Tìm phần tử đầu tiên có group === 1
const phoneInGroup1 = phones.find(phone => phone.group === 1);

console.log(phoneInGroup1); // Kết quả: { name: 'Apple', group: 1 }

Phương pháp tìm này cho phép bạn nhanh chóng xác định vị trí phần tử đầu tiên trong mảng có thoả mãn điều kiện được cung cấp giúp code clear hơn rất nhiều so với việc dùng các vòng lặp truyền thống.

Kỹ thuật 4: Sử dụng includes thay thế các vòng lặp dư thừa

Khi chúng ta cần kiểm tra xem một mảng có chứa giá trị cụ thể hay không, sử dụng includes có thể làm đơn giản đoạn mã của bạn thay vì lặp qua mảng để kiểm tra sự tồn tại của phần tử.

Ví dụ:

const fruits = ['Apple', 'Banana', 'Carrot'];
let hasBanana = false;
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i] === 'Banana') {
        hasBanana = true;
        break;
    }
}

Bạn chỉ cần sử dụng includes:

const hasBanana = fruits.includes('Banana');

Phương pháp này cung cấp một giải pháp tinh tế cho quá trình rườm rà hơn khi sử dụng các vòng lặp truyền thống.

Tính năng này đặc biệt hữu ích khi xử lý mảng mà bạn thường xuyên cần kiểm tra.

Kỹ thuật 5: Sử dụng biến trả về kết quả duy nhất

Theo như mình được biết đặc biệt là trong các hàm nhỏ gọn, chúng ta có thể sử dụng tên biến nhất quán cho kết quả trả về. Điều này làm rõ giá trị về đến từ đâu và cung cấp quy ước đặt tên biến chuẩn mà nếu người khác đọc code của bạn họ có thể dễ dàng nhận ra.

function calculateTotal(items) {
    let result = 0;
    for (let i = 0; i < items.length; i++) {
        result += items[i].price;
    }
    return result;
}

Kỹ thuật 6: Duy trì tính toàn vẹn của đối tượng

Trong lúc thao tác với dữ liệu JSON trả về từ backend, chúng ta thường xử lý các thuộc tính cụ thể riêng lẻ trong một key-value. Điều này càng rõ ràng hơn khi đôi khi chúng ta có những case chỉ dùng đến vài thuộc tính. Nhiều lập trình viên có xu hướng chỉ trích xuất các thuộc tính cần thiết cho các hoạt động, đây là phương pháp đầu tiên người ta nghĩ đến, tuy nhiên đây là một cách làm thực tế và không lâu dài.

Khi không chắc chắn rằng liệu một hàm có cần thêm các phụ thuộc sau này hay không, việc duy trì tính toàn vẹn của toàn bộ đối tượng là điều nên làm. Ví dụ một function component có thể sử dụng icon và content nhưng có thể sau này title hoặc date có thể được sử dụng. Việc truyền toàn bộ đối tượng vào function component thay vì thuộc tính riêng lẻ không chỉ làm giảm độ dài của danh sách props mà còn tăng cường khả năng đọc và linh hoạt của mã

// Trích xuất từng thuộc tính riêng lẻ
function Card({ icon, content }) {
    return (
        <div>
            <img src={icon} alt="icon" />
            <p>{content}</p>
        </div>
    );
}

// Sử dụng
const data = { icon: 'icon.png', content: 'Hello world', title: 'Welcome' };
<Card icon={data.icon} content={data.content} />;

// Duy trì toàn vẹn của đối tượng
function Card(props) {
    const { icon, content } = props;
    return (
        <div>
            <img src={icon} alt="icon" />
            <p>{content}</p>
        </div>
    );
}

// Sử dụng
const data = { icon: 'icon.png', content: 'Hello world', title: 'Welcome' };
<Card {...data} />;

🌟 Kết luận cuối cùng

Các kỹ thuật viết mã JS ở trên có thể cải thiện hiệu suất chất lượng cho đoạn code của bạn, giúp chúng dễ dàng đọc và maintain lâu dài. Vì vậy hãy thử những tip đơn giản này trong dự án và trải nghiệm trực tiếp những cải tiến trên nhé. Chúc bạn code vui vẻ !!!