perf: add experimental support for importModule

This replaces the child compiler with a
lightweight execution of modules within
the module graph of the original compilation

Author: sokra

.github/workflows/nodejs.yml

@@ -57,8 +57,15 @@ jobs:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [10.x, 12.x, 14.x]
         webpack-version: [4, latest]
+        experimental-use-import-module: [false]
+        include:
+          - os: 'ubuntu-latest'
+            node-version: 14.x
+            webpack-version: latest
+            experimental-use-import-module: true
 
     runs-on: ${{ matrix.os }}
+    continue-on-error: ${{ matrix.experimental-use-import-module }}
 
     steps:
       - name: Setup Git
@@ -87,8 +94,13 @@ jobs:
         run: npm i webpack@${{ matrix.webpack-version }}
 
       - name: Run tests for webpack version ${{ matrix.webpack-version }}
+        if: ${{ !matrix.experimental-use-import-module }}
         run: npm run test:coverage -- --ci
 
+      - name: Run optional tests for webpack version ${{ matrix.webpack-version }} with import module
+        if: ${{ matrix.experimental-use-import-module }}
+        run: EXPERIMENTAL_USE_IMPORT_MODULE=true npm run test:coverage -- --ci
+
       - name: Submit coverage data to codecov
         uses: codecov/codecov-action@v1
         with:

README.md

@@ -75,14 +75,15 @@ 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 |
+|                               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                    |
+| **[`experimentalUseImportModule`](#experimentalUseImportModule)** |     `{Boolean}`      |                `false`                | Use an experimental webpack API to execute modules instead of child compilers |
 
 #### `filename`
 
@@ -256,6 +257,14 @@ module.exports = {
 };
 ```
 
+#### `experimentalUseImportModule`
+
+Use an experimental webpack API to execute modules instead of child compilers.
+
+This improves performance and memory usage a lot, but isn't as stable as the normal approach.
+
+When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the css execution.
+
 ### Loader Options
 
 |              Name               |         Type         |              Default               | Description                                                                       |