Wie konfiguriere ich ein Webpack mit MiniCssExtractPlugin, um kleine JS-Blöcke zu vermeiden? ⇐ CSS

[Anonymous]

In unserer Webpack-Konfiguration verwenden wir MiniCssExtractPlugin, um den Stil zu extrahieren, um statische Dateien zu trennen. Es funktioniert gut, aber wenn wir den dynamischen Import für CSS verwenden, werden zwei Dateien generiert: eine CSS- und eine weitere JS-Datei.
z. B.:

Code: Select all

if (isMobile) {
import('./mobile.css')
}

if (isDesktop) {
import('./desktop.css')
}

Webpack für diese Datei generiert zusätzliche 4 Dateien:

• mobile.js
• mobile.css
• desktop.js
• desktop.css

sowohl mobile.js als auch desktop.js sind kleine Module, die nur eines aufrufen Funktion:

Code: Select all

"use strict";
(self["webpackChunksportpursuit"] = self["webpackChunksportpursuit"] || []).push([[9996],{

/***/ 34568:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin

/***/ })

}]);

Aus Leistungsgründen möchte ich diese zusätzlichen JS-Dateien vermeiden. Theoretisch behalten Sie diese Logik im übergeordneten Modul bei, das Stile importiert.