I think that if this property is critical for your users, and you want to optimize CSS for them, then you can keep all plug-in animations in a separate CSS file. For example

<link rel="stylesheet" href="animation.css" media="(prefers-reduced-motion: no-preference)">

You can test it in Chrome Browser by using "Emulate CSS media feature prefers-reduced-motion" in Rendering Tab

Fot me it's work. This file will be skip if your user turn on this option and it will save downloading.

if you need support some strange browser you can write this ->

<script>
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
       link.href = 'animation.css';
       document.head.appendChild(link);
    }
</script>