> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`.

```js theme={null}
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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.vue') // [!code --:2]
      return pages[`./Pages/${name}.vue`]()
      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) // [!code ++:2]
      return pages[`./Pages/${name}.vue`]
  },
  ```

  ```js React icon="react" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.jsx') // [!code --:2]
      return pages[`./Pages/${name}.jsx`]()
      const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) // [!code ++:2]
      return pages[`./Pages/${name}.jsx`]
  },
  ```

  ```js Svelte icon="s" theme={null}
  resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.svelte') // [!code --:2]
      return pages[`./Pages/${name}.svelte`]()
      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) // [!code ++:2]
      return pages[`./Pages/${name}.svelte`]
  },
  ```
</CodeGroup>

## Webpack

Để dùng code splitting với Webpack, bật [dynamic imports](https://github.com/tc39/proposal-dynamic-import) bằng Babel plugin:

```bash theme={null}
npm install @babel/plugin-syntax-dynamic-import
```

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

```json theme={null}
{
    "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`.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  resolve: name => require(`./Pages/${name}`), // [!code --]
  resolve: name => import(`./Pages/${name}`), // [!code ++]
  ```

  ```js React icon="react" theme={null}
  resolve: name => require(`./Pages/${name}`), // [!code --]
  resolve: name => import(`./Pages/${name}`), // [!code ++]
  ```

  ```js Svelte icon="s" theme={null}
  resolve: name => require(`./Pages/${name}.svelte`), // [!code --]
  resolve: name => import(`./Pages/${name}.svelte`), // [!code ++]
  ```
</CodeGroup>

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.

```js theme={null}
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](https://inertiajs.com/docs/v3/advanced/code-splitting). 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.