Code splitting

Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem hướng dẫn nâng cấp để bắt đầu.

Code splitting chia các trang khác nhau của ứng dụng thành những bundle nhỏ hơn, sau đó chỉ tải theo nhu cầu khi người dùng truy cập trang mới. Điều này có thể giảm đáng kể kích thước JavaScript bundle ban đầu mà trình duyệt phải tải, qua đó cải thiện thời gian render đầu tiên. Mặc dù code splitting hữu ích cho các project rất lớn, nó cũng tạo thêm request khi truy cập trang mới. Nhìn chung, nếu có thể dùng một bundle duy nhất, ứng dụng thường sẽ cho cảm giác phản hồi nhanh hơn. Để bật code splitting, bạn cần điều chỉnh callback resolve trong cấu hình createInertiaApp(). Cách thực hiện khác nhau tùy bundler đang sử dụng.

Sử dụng Vite

Vite mặc định bật code splitting (hay cách họ gọi là lazy-loading) khi dùng hàm import.meta.glob(). Vì vậy, chỉ cần bỏ tùy chọn { eager: true }, hoặc đặt nó thành false, để tắt eager loading.

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
    return pages[`./Pages/${name}.vue`]
    const pages = import.meta.glob('./Pages/**/*.vue') 
    return pages[`./Pages/${name}.vue`]()
},

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) 
    return pages[`./Pages/${name}.jsx`]
    const pages = import.meta.glob('./Pages/**/*.jsx') 
    return pages[`./Pages/${name}.jsx`]()
},

resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) 
    return pages[`./Pages/${name}.svelte`]
    const pages = import.meta.glob('./Pages/**/*.svelte') 
    return pages[`./Pages/${name}.svelte`]()
},

Sử dụng Webpack

Để dùng code splitting với Webpack, trước tiên bạn cần bật dynamic imports thông qua một Babel plugin. Hãy cài plugin này.

npm install @babel/plugin-syntax-dynamic-import

Tiếp theo, tạo file .babelrc trong project với cấu hình sau:

{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Nếu dùng Laravel Mix, Babel plugin cho dynamic import đã được cài và cấu hình sẵn, nên bạn có thể bỏ qua các bước này. Chúng tôi khuyến nghị Laravel Mix 6 trở lên vì các phiên bản cũ có một số vấn đề đã biết. Cuối cùng, cập nhật callback resolve trong code khởi tạo ứng dụng để dùng import thay cho require.

resolve: name => require(`./Pages/${name}`), 
resolve: name => import(`./Pages/${name}`), 

resolve: name => require(`./Pages/${name}`), 
resolve: name => import(`./Pages/${name}`), 

resolve: name => require(`./Pages/${name}.svelte`), 
resolve: name => import(`./Pages/${name}.svelte`), 

Bạn cũng nên cân nhắc cache busting để buộc trình duyệt tải phiên bản asset mới nhất. Để làm vậy, hãy thêm cấu hình sau vào file cấu hình webpack.

output: {
    chunkFilename: 'js/[name].js?id=[chunkhash]',
}

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v2 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Sử dụng Vite

Sử dụng Webpack

Tài liệu chính thức

​Sử dụng Vite

​Sử dụng Webpack

​Tài liệu chính thức

Sử dụng Vite

Sử dụng Webpack

Tài liệu chính thức