perf: add skipRuntimeLoading option to skip generating runtime code (…

…webpack-contrib#256)
Coremail · Aug 13, 2021 · 29af40f · 29af40f
1 parent cc64284
commit 29af40f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 10 deletions.
diff --git a/README.md b/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.

diff --git a/src/index.js b/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);"]),