ReactJS - Chia nhỏ mã nguồn: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture nhà phát triển React! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới chia nhỏ mã nguồn trong ReactJS. Đừng lo lắng nếu bạn mới bắt đầu lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ hiểu chia nhỏ mã nguồn là gì và cách sử dụng nó như một chuyên gia!

什么是代码分割 (Code Splitting)?

Hãy tưởng tượng bạn đang chuẩn bị hành lý cho một chuyến đi. Bạn có sẽ nhồi tất cả những gì bạn có vào một vali khổng lồ không? Có lẽ là không! Bạn sẽ chỉ mang theo những gì cần thiết, phải không? Well, chia nhỏ mã nguồn trong React hoạt động tương tự.

Chia nhỏ mã nguồn là một kỹ thuật cho phép bạn chia nhỏ mã JavaScript của bạn thành các phần nhỏ hơn. Thay vì tải toàn bộ mã của bạn cùng một lúc khi người dùng truy cập trang web của bạn, bạn chỉ tải những gì cần thiết. Điều này làm cho thời gian tải trang đầu tiên nhanh hơn và ứng dụng của bạn hiệu quả hơn.

Tại sao chia nhỏ mã nguồn lại quan trọng?

1. Thời gian tải trang đầu tiên nhanh hơn
2. Hiệu suất tốt hơn
3. Cải thiện trải nghiệm người dùng

Bây giờ, hãy cùng tìm hiểu cách chúng ta có thể triển khai chia nhỏ mã nguồn trong React!

Chia nhỏ mã nguồn cơ bản với React.lazy() và Suspense

React cung cấp hai công cụ chính cho chia nhỏ mã nguồn: React.lazy() và Suspense.

React.lazy()

React.lazy() cho phép bạn hiển thị một nhập động như một thành phần bình thường. Dưới đây là cách nó hoạt động:

import React, { lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

Trong ví dụ này, LazyComponent sẽ không được tải cho đến khi nó thực sự cần thiết trong ứng dụng của bạn.

Suspense

Suspense cho phép bạn chỉ định một trạng thái tải trong khi chờ các thành phần tải chậm. Dưới đây là cách bạn sử dụng nó:

import React, { Suspense } from 'react';

function MyComponent() {
return (
<Suspense fallback={<div>Đang tải...</div>}>
<LazyComponent />
</Suspense>
);
}

Thuộc tính fallback chỉ định điều gì cần hiển thị trong khi thành phần tải chậm.

Ví dụ thực tế: Tạo một trang tải chậm

Hãy tạo một ứng dụng đơn giản với một trang tải chậm. Đầu tiên, chúng ta sẽ thiết lập cấu trúc thư mục:

src/
App.js
Home.js
About.js

Bây giờ, hãy triển khai chia nhỏ mã nguồn trong App.js:

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Trang chủ</Link></li>
<li><Link to="/about">Về chúng tôi</Link></li>
</ul>
</nav>

<Suspense fallback={<div>Đang tải...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Suspense>
</div>
</Router>
);
}

export default App;

Trong ví dụ này, chúng ta sử dụng React Router cho导航. Các thành phần Home và About được tải chậm, có nghĩa là chúng sẽ chỉ được lấy khi người dùng navigates đến các route tương ứng.

Kỹ thuật chia nhỏ mã nguồn nâng cao

Chia nhỏ mã nguồn dựa trên route

Chia nhỏ mã nguồn dựa trên route非常适合 cho các ứng dụng lớn hơn. Bạn chia nhỏ mã nguồn dựa trên route, tải chỉ các thành phần cần thiết cho mỗi trang.

Dưới đây là một ví dụ sử dụng React Router:

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const Contact = lazy(() => import('./routes/Contact'));

function App() {
return (
<Router>
<Suspense fallback={<div>Đang tải...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}

Chia nhỏ mã nguồn dựa trên thành phần

Đôi khi, bạn có thể muốn chia nhỏ các thành phần riêng lẻ thay vì toàn bộ route. Điều này rất hữu ích cho các thành phần phức tạp không phải lúc nào cũng cần thiết.

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function MyComponent() {
return (
<div>
<h1>Thành phần của tôi</h1>
<Suspense fallback={<div>Đang tải thành phần nặng...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}

Các nguyên tắc tốt nhất cho chia nhỏ mã nguồn

Nguyên tắc	Mô tả
Chia nhỏ mã nguồn ở cấp độ route	Bắt đầu chia nhỏ mã nguồn ở cấp độ route để có tác động lớn nhất
Tránh chia nhỏ quá nhiều	Đừng chia nhỏ mỗi thành phần nhỏ - tập trung vào các phần lớn hơn, ít khi sử dụng của ứng dụng
Sử dụng xuất khẩu có tên	Khi sử dụng nhập động, sử dụng xuất khẩu có tên để mã rõ ràng hơn
Tải trước các thành phần quan trọng	Đối với các thành phần quan trọng, hãy xem xét tải trước chúng để cải thiện hiệu suất nhận thức
Giới hạn lỗi	Sử dụng giới hạn lỗi để xử lý các lỗi tải một cách mượt mà

Kết luận

Chúc mừng! Bạn đã刚刚 bước vào thế giới chia nhỏ mã nguồn trong React. Nhớ rằng, chia nhỏ mã nguồn là tất cả về tối ưu hóa hiệu suất của ứng dụng và cung cấp một trải nghiệm người dùng tốt hơn. Khi bạn xây dựng các ứng dụng lớn hơn, hãy nhớ những kỹ thuật này để đảm bảo các ứng dụng React của bạn nhanh chóng, hiệu quả và thân thiện với người dùng.

Thực hành các khái niệm này, thử nghiệm với các chiến lược chia nhỏ khác nhau, và sớm bạn sẽ chia nhỏ mã nguồn như một chuyên gia! Chúc may mắn và hy vọng các gói của bạn luôn được tối ưu hóa! ??

Credits: Image by storyset