Code splitting

Mặc định, Inertia lazy-load page component, tách mỗi page thành bundle riêng chỉ tải khi cần. Điều này giảm kích thước JavaScript bundle ban đầu nhưng cần thêm request khi truy cập page mới. Bạn có thể tắt lazy loading để eager bundle mọi page vào một file. Eager loading loại request theo page nhưng tăng kích thước bundle ban đầu.

Vite Plugin

Tùy chọn lazy trong shorthand pages kiểm soát cách page component được tải. Mặc định là true.

createInertiaApp({
    pages: {
        lazy: false, // Bundle all pages into a single file
    },
    // ...
})

Vite thủ công

Bạn có thể cấu hình code splitting thủ công bằng import.meta.glob() của Vite khi không dùng Inertia Vite plugin. Truyền { eager: true } để bundle mọi page, hoặc bỏ option để lazy-load.

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

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

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

Webpack

Để dùng code splitting với Webpack, bật dynamic imports bằng Babel plugin:

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 nên có thể bỏ qua. Khuyến nghị Laravel Mix 6 trở lên vì các version cũ có vấn đề đã biết. Cuối cùng, cập nhật callback resolve trong code khởi tạo app để dùng import thay 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 để ép browser tải asset version mới nhất. 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 v3 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

Vite Plugin

Vite thủ công

Webpack

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

​Vite Plugin

​Vite thủ công

​Webpack

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

Vite Plugin

Vite thủ công

Webpack

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