Webpack css загружает один блок на файловый компонент с последовательным добавлением и встроенным критичным по требованию

Question

Я пытаюсь достичь нескольких целей с помощью конфигурации моего веб-пакета, и мне интересно, есть ли плагины или потоки, которые уже решили эту ситуацию, или мне нужно было бы создать плагин самостоятельно, и я постараюсь объяснить свои потребности:

1. Во всех моих файлах / компонентах есть импорт для css вендора и импорт для css-области компонента с css-модулями. Поток должен быть примерно таким (в зависимости от того, является ли компонент ленивым или обратите внимание, что будет пакет или несколько блоков):

1-й компонент

1. получить из файла стиля scoped, загрузить его с модулями css 2. получить из таблицы стилей поставщиков, загрузить его без модулей css, посмотреть, какие классы используются в компоненте html или jsx, 3. объединить его с файлом стиля scoped в отдельном чанке, если компонент является асинхронным или добавить его в пакет

2-й компонент (следующий) 1. То же самое. 2. Получите от таблицы стилей производителей информацию о том, какие классы используются в компоненте html или jsx, но добавьте только те, которые еще не добавлены в предыдущие пакеты / блоки 3. То же

в конце концов, если все наши компоненты синхронизированы, мы получим пакет css, который содержит все используемые классы вендоров и все cssed области css, но если есть асинхронные компоненты, у нас никогда не будет классов вендоров в первом пакете, который мы еще не используем, и только они будут загрузка с асинхронным блоком компонента вместе с компонентом cssed scss

Это проблема первая.

Во-вторых, я хочу, чтобы в компоненте можно было указать, какой компонент является критическим, поэтому, если я укажу 5 критических компонентов, все классы, используемые поставщиком, будут в этом компоненте, и стиль всех областей будет встроен (для использования с плагином html webpack) и все остальное будет в пакете, и, например, если у нас есть 1 асинхронный компонент, он будет содержать стили с областью действия и только CSS от поставщиков, которые ранее не использовались нигде на странице.

в настоящее время я использую purgecss, но он не работает, как я описал, но он очищает все неиспользуемые классы от css вендора, но у него нет последовательного шаблона, который мне нужен из-за критических компонентов и асинхронных компонентов.

Кроме того, я использую to-string-loader для критического CSS, но я применяю его только на CSS, а не на вендорах, поэтому у меня в основном есть половина моего решения, потому что мне нужно регулярно использовать вендор, игнорируя тот факт, что большая часть этого CSS Я буду использовать только позже, после загрузки некоторых асинхронных компонентов.

Также у меня есть проблема с добавлением строки из to-string-loader в шаблон ejs с помощью html-плагина, поэтому мой третий вопрос касается возможности отправки информации в html-plugin из компонента, например:

   import critical from "./test.css";

   send_to_variable_in_html_plugin(critical); //and then use same variable in ejs template

И, наконец, возникает вопрос об асинхронной загрузке в веб-пакете и о том, как сделать так, чтобы автоматическая предварительная загрузка также выполнялась. В настоящее время я использую такие вещи:

     import(
    /* webpackChunkName: "my-chunk-name_2" */
    /* webpackMode: "lazy" */
    /* webpackPrefetch: true */ "./main_data.js").then(m => {

           //do your work
        })

и это предварительная выборка только js chunk, но css chunk, который также генерируется, не является предварительной выборкой, а загружается только тогда, когда js также загружается, поэтому я сделал:

       function prefetchCss(m) {
          var link = document.createElement('link');
          link.rel = 'prefetch';
          link.as = 'style';
          link.href = "/dist/" + m + ".chunk.css";
          document.head.appendChild(link);
       }


       prefetchCss("my-chunk-name_2");

Используется с динамическим импортом, но решение не интуитивно понятно и выглядит хакерским. Есть ли возможность "заставить" веб-пакет также выполнить предварительную загрузку css?

Итак, для резюме:

1. динамически добавлять компоненты css вендора к блокам компонентов, которые могут быть встроенными, связанными или отдельными блоками.

2. Вынудите некоторые компоненты встроить стили с помощью отправки информации в веб-пакет с помощью императивной функции, например -> inlineStyles(), чтобы стили не были включены ни в комплект, ни в блоки, потому что они уже включены во встроенный стиль

3. А затем назначьте некоторую переменную в компоненте, которую я позже буду использовать в плагине html webpack, чтобы я мог вставлять эти встроенные стили всякий раз, когда захочу (я предпочитаю свой собственный шаблон.ejs, так что inject имеет значение false.

4. Заставить веб-пакет предварительно загружать куски CSS также рядом с кусками JS.