Prevents using theme JavaScript files and external scripts with a compressed size greater than the configured [`threshold_in_bytes`](#options). Limiting the size of JavaScript files helps to improve the [performance](/docs/storefronts/themes/best-practices/performance) of your theme.

You occasionally might need to load large JavaScript bundles. In these cases, you can use an [import on interaction pattern](https://addyosmani.com/blog/import-on-interaction/) to avoid having users who don't interact with a component execute the bundle.

## Examples

The following examples contain code snippets that either fail or pass this check.

### ✗ Fail

In the following example, `assets/chat-widget.js` is greater than 10 KB gzipped:

```html
<script src="chat-widget.js" defer></script>
```

### &#x2713; Pass

```html
<script>
  const chatWidgetButton = document.getElementById('#chat-widget')

  chatWidgetButton.addEventListener('click', e => {
    e.preventDefault();
    import("chat-widget.js")
      .then(module => module.default)
      .then(ChatWidget => ChatWidget.init())
      .catch(err => {
        console.error(err);
      });
  });
</script>
```

## Options

The following example contains the default configuration for this check:

For themes:

```yaml
AssetSizeJavaScript:
  enabled: false
  threshold_in_bytes: 10000
```

For theme app extensions:

```yaml
AssetSizeJavaScript:
  enabled: false
  severity: suggestion
  threshold_in_bytes: 10000
```

| Parameter | Description |
| --- | --- |
| `enabled` | Whether this check is enabled. |
| `severity` | The [severity](/docs/storefronts/themes/tools/theme-check/configuration#check-severity) of the check. |
| `threshold_in_bytes` | The maximum allowed compressed size, in bytes, for a single JavaScript file. This includes the theme and remote scripts. |

## Disabling this check

This check is enabled by default when you run the Shopify CLI 3.x [`build`](/docs/api/shopify-cli/app/app-build) command on an app that contains a theme app extension. This limit is not yet enforced, but disabling this check isn't recommended for theme app extensions.

If you can't avoid violating the rule, then you should disable the check using the [comment syntax](/docs/storefronts/themes/tools/theme-check/configuration#disable-checks-using-liquid-comments). This ensures that you intentionally disable the check for each instance.



```liquid
{% # theme-check-disable AssetSizeJavaScript %}
<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>
{% # theme-check-enable AssetSizeJavaScript %}




This check is disabled by default when you run the Shopify CLI 2.x [`shopify theme check`](/docs/storefronts/themes/tools/theme-check/commands) command.