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

<Warning>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](/v3/getting-started/upgrade-guide) để bắt đầu.</Warning>

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.

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

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

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

## Sử dụng Webpack

Để dùng code splitting với Webpack, trước tiên bạn cần bật [dynamic imports](https://github.com/tc39/proposal-dynamic-import) thông qua một Babel plugin. Hãy cài plugin này.

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

<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 để 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.

```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 v2 chính thức](https://inertiajs.com/docs/v2/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.