webpack: PurfiyCSSPlugin не включает стили, на которые ссылается bundle.js

Я пытаюсь использовать веб- пакеты PurifyCSSPlugin. Мой конфиг выглядит так

new PurifyCSSPlugin({
    paths: glob.sync([
          path.join(env.outputDirectory, './*.html'),
          path.join(env.outputDirectory, './**/*.js'),
          path.join(__dirname, './**/*.tsx')
        ]),
    purifyOptions: {
        info: true,
        minify: false
    }
})

и я использую стили таким образом:

import { title } from "./styles.scss";
...
return <h1  className={title}>Hello!</h1>;

(весь проект можно найти на GitHub).

Проблемы у меня есть

  1. Если запустить сборку в первый раз при получении этого вывода:

    PurifyCSS уменьшил размер файла на ~ 99,4%

    и страница отображается неправильно, потому что отсутствуют ссылки на стили в tsx/jsx (или транзитивные зависимости стиля).

  2. Если я запускаю сборку во второй раз, я получаю такой вывод:

    PurifyCSS уменьшил размер файла на ~ 93,2%

    и страница правильно отображается. Мои настройки путей приводят к нахождению файла bunde.js из предыдущей сборки, и по этой причине также учитываются мои стили tsx/jsx. Вывод отлично оптимизирован.

  3. Если я следую подсказке PurifiyCSS для модулей CSS, я получаю следующий вывод:

    PurifyCSS уменьшил размер файла на ~ 1,5%

    и страница также правильно отображается. Но все стили (используемые и неиспользованные) включены, и размер пакета намного больше. Всего на пару байтов меньше, чем без PurifyCSS.

Теперь у меня вопрос: как мне добиться результата, чтобы получить "2"? даже на первой сборке запустить? Кажется, что выход нигде не сериализован, и поэтому я не могу сказать PurifyCSS принять это во внимание.

Кто-нибудь решил эту проблему? Я не мог ничего найти в Интернете.

Спасибо Стефан

0 ответов

Другие вопросы по тегам