Skip to content

Commit 8471ac2

Browse files
sokrasokra
authored
feat: add experimental support for importModule, improve perfomance (#737)
1 parent a33f22f commit 8471ac2

File tree

68 files changed

+4328
-199
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+4328
-199
lines changed

Diff for: ‎.github/workflows/nodejs.yml

+70
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,18 @@ jobs:
8080
if: matrix.os == 'windows-latest'
8181
run: npm i -g npm
8282

83+
- name: Get npm cache directory
84+
id: npm-cache
85+
run: |
86+
echo "::set-output name=dir::$(npm config get cache)"
87+
88+
- uses: actions/cache@v1
89+
with:
90+
path: ${{ steps.npm-cache.outputs.dir }}
91+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
92+
restore-keys: |
93+
${{ runner.os }}-node-
94+
8395
- name: Install dependencies
8496
run: npm i
8597

@@ -93,3 +105,61 @@ jobs:
93105
uses: codecov/codecov-action@v1
94106
with:
95107
token: ${{ secrets.CODECOV_TOKEN }}
108+
109+
test2:
110+
name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack latest, experimentalUseImportModule
111+
112+
strategy:
113+
matrix:
114+
os: [ubuntu-latest, windows-latest, macos-latest]
115+
node-version: [10.x, 12.x, 14.x]
116+
117+
runs-on: ${{ matrix.os }}
118+
119+
steps:
120+
- name: Setup Git
121+
if: matrix.os == 'windows-latest'
122+
run: git config --global core.autocrlf input
123+
124+
- uses: actions/checkout@v2
125+
126+
- name: Use Node.js ${{ matrix.node-version }}
127+
uses: actions/setup-node@v1
128+
with:
129+
node-version: ${{ matrix.node-version }}
130+
131+
- name: Use latest NPM on ubuntu/macos
132+
if: matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest'
133+
run: sudo npm i -g npm
134+
135+
- name: Use latest NPM on windows
136+
if: matrix.os == 'windows-latest'
137+
run: npm i -g npm
138+
139+
- name: Get npm cache directory
140+
id: npm-cache
141+
run: |
142+
echo "::set-output name=dir::$(npm config get cache)"
143+
144+
- uses: actions/cache@v1
145+
with:
146+
path: ${{ steps.npm-cache.outputs.dir }}
147+
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
148+
restore-keys: |
149+
${{ runner.os }}-node-
150+
151+
- name: Install dependencies
152+
run: npm i
153+
154+
- name: Install webpack latest
155+
run: npm i webpack@latest
156+
157+
- name: Run tests for webpack version latest with experimentalUseImportModule
158+
run: npm run test:coverage -- --ci
159+
env:
160+
EXPERIMENTAL_USE_IMPORT_MODULE: 'true'
161+
162+
- name: Submit coverage data to codecov
163+
uses: codecov/codecov-action@v1
164+
with:
165+
token: ${{ secrets.CODECOV_TOKEN }}

Diff for: ‎README.md

+19-8
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,15 @@ module.exports = {
7575

7676
### Plugin Options
7777

78-
| Name | Type | Default | Description |
79-
| :-----------------------------------: | :------------------: | :-----------------------------------: | :--------------------------------------------------------- |
80-
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
81-
| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
82-
| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
83-
| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `<link>` at the given position |
84-
| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag |
85-
| **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
78+
| Name | Type | Default | Description |
79+
| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------- |
80+
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
81+
| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
82+
| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
83+
| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `<link>` at the given position |
84+
| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag |
85+
| **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
86+
| **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
8687

8788
#### `filename`
8889

@@ -256,6 +257,16 @@ module.exports = {
256257
};
257258
```
258259

260+
#### `experimentalUseImportModule`
261+
262+
Use an experimental webpack API to execute modules instead of child compilers.
263+
264+
This improves performance and memory usage a lot, but isn't as stable as the normal approach.
265+
266+
When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the css execution.
267+
268+
You need to have at least webpack 5.33.2.
269+
259270
### Loader Options
260271

261272
| Name | Type | Default | Description |

Diff for: ‎package-lock.json

+21-35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"npm-run-all": "^4.1.5",
7474
"prettier": "^2.2.1",
7575
"standard-version": "^9.1.0",
76-
"webpack": "^5.27.1",
76+
"webpack": "^5.33.2",
7777
"webpack-cli": "^4.5.0",
7878
"webpack-dev-server": "^3.7.2"
7979
},

Diff for: ‎src/index.js

+20-2
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,11 @@ class MiniCssExtractPlugin {
309309
this._sortedModulesCache = new WeakMap();
310310

311311
this.options = Object.assign(
312-
{ filename: DEFAULT_FILENAME, ignoreOrder: false },
312+
{
313+
filename: DEFAULT_FILENAME,
314+
ignoreOrder: false,
315+
experimentalUseImportModule: false,
316+
},
313317
options
314318
);
315319

@@ -355,6 +359,18 @@ class MiniCssExtractPlugin {
355359
: // eslint-disable-next-line global-require
356360
require('webpack');
357361

362+
if (this.options.experimentalUseImportModule) {
363+
if (!compiler.options.experiments) {
364+
throw new Error(
365+
'experimentalUseImportModule is only support for webpack >= 5.32.0'
366+
);
367+
}
368+
if (typeof compiler.options.experiments.executeModule === 'undefined') {
369+
// eslint-disable-next-line no-param-reassign
370+
compiler.options.experiments.executeModule = true;
371+
}
372+
}
373+
358374
// TODO bug in webpack, remove it after it will be fixed
359375
// webpack tries to `require` loader firstly when serializer doesn't found
360376
if (
@@ -399,7 +415,9 @@ class MiniCssExtractPlugin {
399415

400416
normalModuleHook.tap(pluginName, (loaderContext) => {
401417
// eslint-disable-next-line no-param-reassign
402-
loaderContext[pluginSymbol] = true;
418+
loaderContext[pluginSymbol] = {
419+
experimentalUseImportModule: this.options.experimentalUseImportModule,
420+
};
403421
});
404422
});
405423

Diff for: ‎src/loader-options.json

+3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
"esModule": {
1919
"type": "boolean"
2020
},
21+
"layer": {
22+
"type": "string"
23+
},
2124
"modules": {
2225
"type": "object",
2326
"additionalProperties": false,

0 commit comments

Comments
 (0)