fix: avoid reload all css when hot load

webpack-contrib · Mar 21, 2024 · ea2c589 · ea2c589
1 parent 8bf0ad6
commit ea2c589
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/loader.js b/src/loader.js
@@ -44,22 +44,31 @@ const MiniCssExtractPlugin = require("./index");
  * @returns {string}
  */
 function hotLoader(content, context) {
-  const accept = context.locals
-    ? ""
-    : "module.hot.accept(undefined, cssReload);";
-
+  const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
   return `${content}
     if(module.hot) {
+      const localsJsonString = ${localsJsonString};
       // ${Date.now()}
-      var cssReload = require(${stringifyRequest(
+      const cssReload = require(${stringifyRequest(
         context.loaderContext,
         path.join(__dirname, "hmr/hotModuleReplacement.js")
       )})(module.id, ${JSON.stringify({
     ...context.options,
-    locals: !!context.locals,
   })});
-      module.hot.dispose(cssReload);
-      ${accept}
+      // only invalidate when locals change
+      if (
+        module.hot.data &&
+        module.hot.data.value &&
+        module.hot.data.value !== localsJsonString
+      ) {
+        module.hot.invalidate();
+      } else {
+        module.hot.accept();
+      }
+      module.hot.dispose(function(data) {
+        data.value = localsJsonString;
+        cssReload();
+      });
     }
   `;
 }

diff --git a/test/cases/hmr/expected/main.js b/test/cases/hmr/expected/main.js
@@ -363,10 +363,23 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
     if(true) {
+      const localsJsonString = undefined;
       // 
-      var cssReload = __webpack_require__(/*! ../../../src/hmr/hotModuleReplacement.js */ "../../../src/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
-      module.hot.dispose(cssReload);
-      module.hot.accept(undefined, cssReload);
+      const cssReload = __webpack_require__(/*! ../../../src/hmr/hotModuleReplacement.js */ "../../../src/hmr/hotModuleReplacement.js")(module.id, {});
+      // only invalidate when locals change
+      if (
+        module.hot.data &&
+        module.hot.data.value &&
+        module.hot.data.value !== localsJsonString
+      ) {
+        module.hot.invalidate();
+      } else {
+        module.hot.accept();
+      }
+      module.hot.dispose(function(data) {
+        data.value = localsJsonString;
+        cssReload();
+      });
     }