Класс Tailwind CSS Drop-Shadow, вызывая проблемы с производительностью ⇐ CSS

[Anonymous]

Недавно я потерял некоторый нерв из -за того, что в моем применении была причину серьезной падения FPS. Проблема в том, что после некоторого использования приложения его производительность падает очень резко, до примерно 10 кадров в секунду. В поисках причины я обнаружил, что удаление класса -shadow-md из директивы @apply решила проблему.

Код: Выделить всё

    @layer components {
.standard-card {
@apply rounded-md drop-shadow-md bg-surface-content-light dark:bg-surface-content-dark
}
/* other classes */
}
< /code>
В других темах мне удалось найти, что все, что связано с тенью, вызывает тяжелую нагрузку на процессор. Когда динамически рендеринг компонентов это вызывает еще большую нагрузку. В моем случае я отображаю большинство компонентов, которые используют класс стандартной карты, используя цикл V-For. < /P>
 ...content...

Есть ли какие -либо решения этой проблемы?
стек:

vue - 3.2.45 < /li>
Primevue - 3.29.2 < /li>
Primeicons - 6.0.1 < /li>
Vite - 4.3.9 < /li>
Tailwindcss - 3.3.2 < /li>
< /ul>
Конфигурация ветра
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
darkMode: 'class',
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {...}
}
< /code>
, вероятно, связан: < /strong> < /p>
CSS-Проблема с выпуском
css. /п>

Подробнее здесь: https://stackoverflow.com/questions/765 ... nce-issues