perf: add skipRuntimeLoading option to skip generating runtime code (webpack-contrib#256)

Author: aleen42

README.md

@@ -76,13 +76,14 @@ module.exports = {
 ### Plugin Options
 
 |                               Name                                |         Type         |                Default                | Description                                                                   |
-| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------- |
+|:-----------------------------------------------------------------:|:--------------------:|:-------------------------------------:|:------------------------------------------------------------------------------|
 |                    **[`filename`](#filename)**                    | `{String\|Function}` |             `[name].css`              | This option determines the name of each output CSS file                       |
 |               **[`chunkFilename`](#chunkFilename)**               | `{String\|Function}` |          `based on filename`          | This option determines the name of non-entry chunk files                      |
 |                 **[`ignoreOrder`](#ignoreOrder)**                 |     `{Boolean}`      |                `false`                | Remove Order Warnings                                                         |
 |                      **[`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);"]),