правильный способ установки критического CSS для проекта nextjs и удаления нежелательного CSS

Question

У меня есть настройка проекта NextJS -> https://github.com/stefanre1/nextjs-setup

Мне интересно, как правильно удалить нежелательные CSS из Tailwindcss и добавить критические CSS на каждую страницу.

Я пытался подписаться на несколько блогов, чтобы добиться того же, но безуспешно.

Очевидно, я удалил то, что пробовал, поскольку это не работало. На данный момент в репозитории хранится самый минимум кода.

Любая помощь или предложения будут полезны.

Я пробовал решение здесь, чтобы добавить в заголовок, но он добавляет весь CSS, как и ожидалось. Я попытался это одно, а

Answer 1

Вам следует попробовать PurgeCSS. Исходя непосредственно из документации:

PurgeCSS анализирует ваш контент и ваши файлы css. Затем он сопоставляет селекторы, используемые в ваших файлах, с селекторами в ваших файлах содержимого. Он удаляет неиспользуемые селекторы из вашего CSS, что приводит к уменьшению размера файлов CSS.

Документы Tailwind на самом деле есть целый раздел по этому вопросу здесь, подробно, как настроить PurgeCSS и другие методы, чтобы уменьшить размер файла. PurifyCSS - еще одна альтернатива.

Изменить: я только что понял, что вы уже пробовали PurgeCSS, возможно, вы допустили ошибку в своей конфигурации, и вам следует попробовать настройку непосредственно из документации.

Answer 2

Я видел твой код.

• Удалите пакеты @zeit/next-css и next-purgecss, поскольку Nextjs обеспечивает встроенную поддержку css.
• Обо всем позаботится файл postcss.config.js.
• Если вы хотите поместить какой-либо CSS в список надежных отправителей purgeCSS, вы можете сделать это, добавив его в массив списка надежных отправителей в конфигурационном файле postcss.
• Иногда мы хотим игнорировать определенные части файла css из purgeCSS. Для этого добавьте

Вы можете следовать этому руководству, чтобы настроить конфигурацию postcss.

purgecss игнорировать обсуждение

Скажите, работает ли это, или у вас есть сомнения.