feat: add skipRuntimeLoading option to skip generating runtime code

Author: aleen42

README.md

@@ -83,6 +83,7 @@ module.exports = {
 |                      **[`insert`](#insert)**                      | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `<link>` at the given position                                        |
 |                  **[`attributes`](#attributes)**                  |      `{Object}`      |                 `{}`                  | Adds custom attributes to tag                                                 |
 |                    **[`linkType`](#linkType)**                    | `{String\|Boolean}`  |              `text/css`               | Allows loading asynchronous chunks with a custom link type                    |
+|          **[`skipRuntimeLoading`](#skipruntimeloading)**          |     `{Boolean}`      |                `false`                | Whether skip runtime loading asynchronous chunks                              |
 | **[`experimentalUseImportModule`](#experimentalUseImportModule)** |     `{Boolean}`      |                `false`                | Use an experimental webpack API to execute modules instead of child compilers |
 
 #### `filename`
@@ -257,6 +258,36 @@ module.exports = {
 };
 ```
 
+#### `skipRuntimeLoading`
+
+##### `Boolean`
+
+An option to skip runtime loading asynchronous chunks by the current plugin, and developers can determine when to load by using other plugins.
+
+`true` to skip.
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+  plugins: [
+    new MiniCssExtractPlugin({
+      skipRuntimeLoading: true,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+};
+```
+
 #### `experimentalUseImportModule`
 
 Use an experimental webpack API to execute modules instead of child compilers.

src/index.js

@@ -554,7 +554,7 @@ class MiniCssExtractPlugin {
         }
 
         generate() {
-          const { chunk, runtimeRequirements } = this;
+          const { chunk, runtimeRequirements, runtimeOptions } = this;
           const {
             runtimeTemplate,
             outputOptions: { crossOriginLoading },
@@ -568,7 +568,7 @@ class MiniCssExtractPlugin {
             RuntimeGlobals.hmrDownloadUpdateHandlers
           );
 
-          if (!withLoading && !withHmr) {
+          if (runtimeOptions.skipRuntimeLoading || (!withLoading && !withHmr)) {
             return null;
           }
 
@@ -577,9 +577,9 @@ class MiniCssExtractPlugin {
               "chunkId, fullhref, resolve, reject",
               [
                 'var linkTag = document.createElement("link");',
-                this.runtimeOptions.attributes
+                runtimeOptions.attributes
                   ? Template.asString(
-                      Object.entries(this.runtimeOptions.attributes).map(
+                      Object.entries(runtimeOptions.attributes).map(
                         (entry) => {
                           const [key, value] = entry;
 
@@ -591,9 +591,9 @@ class MiniCssExtractPlugin {
                     )
                   : "",
                 'linkTag.rel = "stylesheet";',
-                this.runtimeOptions.linkType
+                runtimeOptions.linkType
                   ? `linkTag.type = ${JSON.stringify(
-                      this.runtimeOptions.linkType
+                      runtimeOptions.linkType
                     )};`
                   : "",
                 `var onLinkComplete = ${runtimeTemplate.basicFunction("event", [
@@ -627,11 +627,11 @@ class MiniCssExtractPlugin {
                       "}",
                     ])
                   : "",
-                typeof this.runtimeOptions.insert !== "undefined"
-                  ? typeof this.runtimeOptions.insert === "function"
-                    ? `(${this.runtimeOptions.insert.toString()})(linkTag)`
+                typeof runtimeOptions.insert !== "undefined"
+                  ? typeof runtimeOptions.insert === "function"
+                    ? `(${runtimeOptions.insert.toString()})(linkTag)`
                     : Template.asString([
-                        `var target = document.querySelector("${this.runtimeOptions.insert}");`,
+                        `var target = document.querySelector("${runtimeOptions.insert}");`,
                         `target.parentNode.insertBefore(linkTag, target.nextSibling);`,
                       ])
                   : Template.asString(["document.head.appendChild(linkTag);"]),

src/plugin-options.json

@@ -65,6 +65,11 @@
       ],
       "description": "This option allows loading asynchronous chunks with a custom link type",
       "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#linktype"
+    },
+    "skipRuntimeLoading": {
+      "type": "boolean",
+      "description": "An option to skip runtime loading asynchronous chunks by the current plugin, and developers can determine when to load by using other plugins.",
+      "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#experimentaluseimportmodule"
     }
   }
 }

test/__snapshots__/validate-plugin-options.test.js.snap

@@ -117,47 +117,47 @@ exports[`validate options should throw an error on the "linkType" option with "i
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
-   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
+   object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }"
 `;