Cách tăng tốc ứng dụng React bằng cách tách mã
Ứng dụng React của bạn quá chậm hoặc mất quá nhiều thời gian để tải? Nếu vậy, bạn có thể muốn sử dụng một kỹ thuật gọi là tách mã. Kỹ thuật này rất hiệu quả trong việc cải thiện tốc độ tải và hiệu suất của các ứng dụng React. Nhưng tách mã là gì? Và nó được thực hiện như thế nào?
Mục Lục
Tách mã là gì?
Một ứng dụng React điển hình bao gồm hàng chục thành phần (và mã). Nhưng bạn không cần tải hầu hết các thành phần này khi tải chúng lần đầu tiên. Việc tách mã đòi hỏi phải tách các phần khác nhau trong ứng dụng của bạn và chỉ tải chúng khi cần. Điều này hiệu quả hơn nhiều so với tải toàn bộ ứng dụng cùng một lúc.
Hãy xem xét một ứng dụng React có ba trang: trang chủ, trang giới thiệu và trang sản phẩm. Khi bạn đang ở trang chủ, sẽ không có ích gì khi tải trang giới thiệu hoặc trang sản phẩm. Bởi vì bạn chưa thực sự ở trên các trang đó. Ý tưởng của việc tách mã là đảm bảo bạn chỉ tải mã khi cần thiết.
Mở một trang web trên trình duyệt web của bạn, sau đó mở DevTools (bạn có thể nhấp vào F12 trên bàn phím để mở trên Google Chrome). Tiếp theo, chuyển đến tab Nguồn. Ở đó, bạn sẽ tìm thấy tất cả mã được tải xuống khi điều hướng đến trang. Không tách mã, trình duyệt sẽ tải xuống tất cả các tệp trong dự án của bạn khi tải trang ban đầu. Điều này có thể làm chậm trang web của bạn nếu nó chứa nhiều tệp.
Việc chia mã trở nên đặc biệt hữu ích khi dự án của bạn bắt đầu ngày càng lớn hơn. Điều này là do việc tải xuống toàn bộ tệp ứng dụng cùng một lúc có thể mất nhiều thời gian. Vì vậy, chia nó ra sẽ khá có lợi.
Phần tốt nhất về việc tách mã là bạn có thể trì hoãn việc tải các thành phần cũng như chức năng. Hướng dẫn giới thiệu của chúng tôi về ReactJS giải thích sâu về các thành phần và chức năng trong trường hợp bạn cần xem lại.
Chức năng tách mã: Sử dụng nhập động
Hãy xem xét tình huống sau đây. Bạn muốn trang chủ của bạn có một nút. Khi bạn bấm vào nút, bạn muốn cảnh báo tổng của 2 và 2 (là 4). Vì vậy, bạn tạo một Trang chủ.js thành phần và xác định chế độ xem trang chủ của bạn.
Trong trường hợp này, bạn có hai lựa chọn. Trước tiên, bạn có thể nhập mã để thêm các số ở đầu Trang chủ.js tài liệu. Nhưng đây là vấn đề. Nếu bạn nhập hàm ở đầu tệp thì mã sẽ tải ngay cả khi bạn chưa nhấp vào nút. Một cách tiếp cận tốt hơn sẽ là tải Tổng() chỉ hoạt động khi bạn nhấp vào nút.
Để đạt được điều này, bạn cần thực hiện nhập động. Điều này có nghĩa là bạn sẽ nhập Tổng() chức năng nội tuyến trong phần tử nút. Đây là mã cho cùng:
export default function Home() {
return (
<div className="Home">
<h1>HomePage</h1>
<button onClick={() => {
import("../sum.js").then((module) => {
alert(module.sum(2, 2))
})
}}
>
Sum both numbers
</button>
</div>
);
}
Bây giờ trình duyệt sẽ chỉ tải xuống sum.js mô-đun khi bạn nhấp vào nút. Điều này cải thiện thời gian tải của trang chủ.
Các thành phần tách mã: Sử dụng React.lazy và Suspense
Bạn có thể tách các thành phần trong React bằng cách sử dụng lười() chức năng. Nơi tốt nhất để thực hiện tách mã là bên trong bộ định tuyến của bạn. Vì đây là nơi bạn ánh xạ các thành phần tới các tuyến trong ứng dụng của mình. Bạn có thể đọc hướng dẫn của chúng tôi về cách xây dựng ứng dụng một trang với React Router nếu bạn cần ôn lại.
Giả sử rằng ứng dụng của bạn có một Trang chủ, VềVà Các sản phẩm thành phần. Khi bạn đang ở Trang chủ thành phần, không có điểm nào trong việc tải Về thành phần hoặc Các sản phẩm thành phần. Vì vậy, bạn cần tách chúng ra khỏi Trang chủ tuyến đường. Đoạn mã sau minh họa cách đạt được điều đó:
Trước tiên, bạn cần nhập các chức năng và thành phần cần thiết từ phản ứng Và Reac-router-dom mô-đun:
import { Routes, Route, Outlet, Link } from "react-router-dom";
import { lazy, Suspense } from "react";
Tiếp theo, bạn cần nhập động các thành phần bằng cách sử dụng lười() chức năng:
const Home = lazy(() => import("./components/Home"));
const About = lazy(() => import("./components/About"));
const Products = lazy(() => import("./components/Products"));
Tiếp theo, thiết lập bố cục (menu điều hướng). Sử dụng
function NavWrapper() {
return (
<>
<nav style={{ display: "flex", gap: "1rem" }}>
<Link to="https://www.smartreviewaz.com/">Home</Link>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
</nav>
<Suspense fallback={<h1>Loading...</h1>}>
<Outlet />
</Suspense>
</>
);
}
Bạn có thể thấy rằng chúng tôi bọc các thành phần bên trong
Cuối cùng, thiết lập tuyến đường:
export default function App() {
return (
<Routes>
<Route path="https://www.smartreviewaz.com/" element={<NavWrapper />}>
<Route path="https://www.smartreviewaz.com/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/about" element={<About />} />
</Route>
</Routes>
);
}
Bây giờ khi bạn truy cập trang chủ, trình duyệt chỉ tải Trang chủ.js tài liệu. Theo cách tương tự, khi bạn bấm vào Về trong menu điều hướng để truy cập trang Giới thiệu, trình duyệt chỉ tải About.js tài liệu. Điều này cũng tương tự đối với trang Sản phẩm.
Tách mã có điều kiện
Thông thường, bạn có thể có nội dung trên trang của mình chỉ áp dụng cho một số người dùng nhất định. Ví dụ: trên trang chủ của bạn, bạn có thể có một phần có dữ liệu quản trị viên dành riêng cho người dùng quản trị viên. Đây có thể là bảng điều khiển dành cho quản trị viên hiển thị cho người dùng quản trị nhưng không hiển thị cho người dùng bình thường.
Trong trường hợp này, bạn sẽ không muốn hiển thị tất cả dữ liệu đó mỗi lần. Trong trường hợp này, bạn có thể sử dụng kỹ thuật tách mã để đảm bảo rằng bạn chỉ hiển thị thông tin đó nếu người này là quản trị viên.
Đây là mã đó sẽ trông như thế nào:
import { lazy, Suspense } from "react";
const AdminData = lazy(() => import("./AdminData"));export default function Home() {
const [isAdmin, setIsAdmin] = useState(false)
return (
<div className="Home">
<h1>HomePage</h1>
<button onClick={() => setIsAdmin(prev => !prev)}>
Toggle Admin
</button>
<Suspense fallback={<h1>Loading...</h1>}>
{isAdmin ? <AdminData /> : <h2> Not the Admin </h2>}
</Suspense>
</div>
);
}
Bây giờ, khi bạn nhấp vào nút chuyển đổi, isAdmin sẽ được đặt thành ĐÚNG VẬY. Kết quả là, ứng dụng sẽ hiển thị
Tách mã có điều kiện sử dụng khái niệm tương tự như kết xuất có điều kiện trong React.
Khái niệm tách mã nâng cao
Một kỹ thuật nâng cao mà bạn có thể kích hoạt khi tách mã là chuyển tiếp. Các sử dụngTransition() hook cho phép bạn thực hiện các cập nhật không khẩn cấp sẽ không thay đổi giao diện người dùng của bạn cho đến khi cập nhật xong.
Đầu tiên, bạn nhập hook:
import {useTransition} from "react"
Sau đó, bạn gọi cái móc, nó sẽ trả về đang chờ xử lý Và bắt đầuChuyển tiếp:
const [isPending, startTransition] = useTransition()
Cuối cùng, bọc mã để cập nhật trạng thái của bạn bên trong startTransition():
startTransition(() => {
setIsAdmin((prev) => !prev)
})
Bây giờ, giao diện người dùng thực tế của bạn sẽ không hiển thị giá trị dự phòng (văn bản đang tải) cho đến khi trình duyệt kết thúc quá trình chuyển đổi. Điều này có nghĩa là nó sẽ đợi trình duyệt tải xuống toàn bộ dữ liệu quản trị trước khi cố gắng hiển thị bất kỳ dữ liệu nào.
Các cách khác để tối ưu hóa hiệu suất phản ứng
Bài viết này đề cập đến việc tách mã như một phương pháp để cải thiện hiệu suất của các ứng dụng React của bạn. Nhưng cũng có một số phương pháp khác có thể cung cấp cho bạn kiến thức cần thiết để tạo các ứng dụng mạnh mẽ.