Prevent JavaScript Abuse on Server Rendered Themes (AssetSizeJavaScript)

July 29, 2022 ยท View on GitHub

For server rendered pages, it is an anti-pattern to execute large JavaScript bundles on every navigation.

This doesn't mean they don't have a reason to exist. For instance, chat widgets are mini applications embedded inside web pages. Designing such an app with server rendered updates would be absurd. However, if only 10% of the users interact with the chat widget, the other 90% should not have to execute the entire bundle on every page load.

The natural solution to this problem is to implement the chat widget using the Import on Interaction Pattern.

Check Details

This rule disallows the use of theme JavaScript files and external scripts to have a compressed size greater than a configured threshold_in_bytes.

:-1: Examples of incorrect code for this check:

<!-- Here assets/chat-widget.js is more than 10KB gzipped. -->
<script src="{{ 'chat-widget.js' | asset_url }}" defer></script>

<!-- The use of jQuery is discouraged in themes -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>

:+1: Example of correct code for this check:

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

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

Check Options

The default configuration is the following.

AssetSizeJavaScript:
  enabled: false
  threshold_in_bytes: 10000

threshold_in_bytes

The threshold_in_bytes option (default: 10000) determines the maximum allowed compressed size in bytes that a single JavaScript file can take.

This includes theme and remote scripts.

When Not To Use It

When you can't do anything about it, it is preferable to disable this rule using the comment syntax:

{% # theme-check-disable AssetSizeJavaScript %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
{% # theme-check-enable AssetSizeJavaScript %}

This makes disabling the rule an explicit affair and shows that the code is smelly.

Version

This check has been introduced in Theme Check 0.5.0.

Resources