Chào mừng đến với Cafedev,nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ khám phá về việc sử dụng Lazy Loading Routes trong Router Vuejs. Lazy Loading Routes là một kỹ thuật quan trọng giúp tối ưu hóa tải trang và tăng hiệu suất cho ứng dụng web của bạn. Hãy cùng tìm hiểu cách áp dụng Lazy Loading Routes để tạo ra các ứng dụng web linh hoạt và nhanh chóng với Vue Router!
Khi xây dựng ứng dụng với một công cụ bundler, gói JavaScript có thể trở nên khá lớn, và do đó ảnh hưởng đến thời gian tải trang. Sẽ hiệu quả hơn nếu chúng ta có thể chia mỗi thành phần của mỗi route thành các phần riêng biệt, và chỉ tải chúng khi route được truy cập.
Vue Router hỗ trợ nhập động ngay từ đầu, điều này có nghĩa là bạn có thể thay thế các nhập tĩnh bằng các nhập động:
// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails.vue')
const router = createRouter({
// ...
routes: [
{ path: '/users/:id', component: UserDetails }
// or use it directly in the route definition
{ path: '/users/:id', component: () => import('./views/UserDetails.vue') },
],
})Tùy chọn component (và components) chấp nhận một hàm trả về một Promise của một thành phần và Vue Router chỉ sẽ tải nó khi trang được truy cập lần đầu tiên, sau đó sử dụng phiên bản đã được lưu trong bộ nhớ cache. Điều này có nghĩa là bạn cũng có thể có các hàm phức tạp hơn miễn là chúng trả về một Promise:
const UserDetails = () =>
Promise.resolve({
/* component definition */
})Nói chung, luôn nên sử dụng nhập động cho tất cả các route của bạn.
tip Lưu Ý Không sử dụng Các thành phần Async cho các route. Các thành phần Async vẫn có thể được sử dụng bên trong các thành phần route nhưng các thành phần route chính chúng ta chỉ là các nhập động.
Khi sử dụng một công cụ bundler như webpack, điều này sẽ tự động hưởng lợi từ phân chia code
Khi sử dụng Babel, bạn cần thêm plugin syntax-dynamic-import để Babel có thể phân tích cú pháp một cách chính xác.
Nội dung chính
1. Nhóm Các Thành Phần Trong Cùng Một Chunk
Với webpack
Đôi khi chúng ta có thể muốn nhóm tất cả các thành phần nằm trong cùng một route vào cùng một async chunk. Để đạt được điều đó, chúng ta cần sử dụng các chunk có tên bằng cách cung cấp tên chunk bằng cú pháp chú thích đặc biệt (yêu cầu webpack > 2.4):
const UserDetails = () =>
import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')webpack sẽ nhóm bất kỳ module nào có cùng tên chunk vào cùng một async chunk.
Với Vite
Trong Vite, bạn có thể định nghĩa các chunk dưới rollupOptions:
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
// https://rollupjs.org/guide/en/#outputmanualchunks
output: {
manualChunks: {
'group-user': [
'./src/UserDetails',
'./src/UserDashboard',
'./src/UserProfileEdit',
],
},
},
},
},
})Cảm ơn bạn đã đọc bài viết về việc sử dụng Lazy Loading Routes trong Router Vuejs trên Cafedev. Hy vọng rằng những thông tin mà chúng tôi chia sẻ đã giúp bạn hiểu rõ hơn về cách tối ưu hóa việc tải trang và tăng hiệu suất cho ứng dụng web của bạn. Với việc áp dụng Lazy Loading Routes, bạn có thể xây dựng các ứng dụng web linh hoạt và mạnh mẽ hơn bao giờ hết. Hãy tiếp tục theo dõi Cafedev để cập nhật thêm kiến thức và kinh nghiệm mới!
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
