- **Type:** `'defer' | 'blocking' | 'module'`
- **Default:** `'defer'`

Used to set how `<script>` tags are loaded.

### defer

By default, the `<script>` tag generated by Builder will automatically set the `defer` attribute to avoid blocking the parsing and rendering of the page.

```html
<head>
  <script defer src="/static/js/main.js"></script>
</head>
<body></body>
```

:::tip
When the browser encounters a `<script>` tag with the defer attribute, it will download the script file asynchronously without blocking the parsing and rendering of the page. After the page is parsed and rendered, the browser executes the `<script>` tags in the order they appear in the document.
:::

### blocking

Setting `scriptLoading` to `blocking` will remove the `defer` attribute, and the script is executed synchronously, which means it will block the browser's parsing and rendering process until the script file is downloaded and executed.

```js
export default {
  html: {
    inject: 'body',
    scriptLoading: 'blocking',
  },
};
```

When you need to set `blocking`, it is recommended to set `html.inject` to `'body'` to avoid page rendering being blocked.

```html
<head></head>
<body>
  <script src="/static/js/main.js"></script>
</body>
```

### module

When `scriptLoading` is set to `module`, the script can support ESModule syntax, and the browser will automatically delay the execution of these scripts by default, which is similar to `defer`.

```js
export default {
  html: {
    scriptLoading: 'module',
  },
};
```

```html
<head>
  <script type="module" src="/static/js/main.js"></script>
</head>
<body></body>
```
