Skip to content

Commit 6c6a10b

Browse files
authored
docs: document dynamicImportFetchPriority and webpackFetchPriority (webpack#6915)
1 parent cdc3788 commit 6c6a10b

File tree

2 files changed

+55
-7
lines changed

2 files changed

+55
-7
lines changed

src/content/api/module-methods.mdx

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ import(
118118
/* webpackChunkName: "my-chunk-name" */
119119
/* webpackMode: "lazy" */
120120
/* webpackExports: ["default", "named"] */
121+
/* webpackFetchPriority: "high" */
121122
'module'
122123
);
123124

@@ -137,28 +138,55 @@ import(
137138
import(/* webpackIgnore: true */ 'ignored-module.js');
138139
```
139140

140-
`webpackIgnore`: Disables dynamic import parsing when set to `true`.
141+
##### `webpackIgnore`
142+
143+
Disables dynamic import parsing when set to `true`.
141144

142145
W> Note that setting `webpackIgnore` to `true` opts out of code splitting.
143146

144-
`webpackChunkName`: A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.
147+
##### `webpackChunkName`
148+
149+
A name for the new chunk. Since webpack 2.6.0, the placeholders `[index]` and `[request]` are supported within the given string to an incremented number or the actual resolved filename respectively. Adding this comment will cause our separate chunk to be named [my-chunk-name].js instead of [id].js.
150+
151+
##### `webpackFetchPriority`
152+
153+
<Badge text="5.87.0+" />
145154

146-
`webpackMode`: Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
155+
Set [`fetchPriority`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) for specific dynamic imports. It's also possible to set a global default value for all dynamic imports by using the [`module.parser.javascript.dynamicImportFetchPriority`](/configuration/module/#moduleparserjavascriptdynamicimportfetchpriority) option.
156+
157+
```js
158+
import(
159+
/* webpackFetchPriority: "high" */
160+
'path/to/module'
161+
);
162+
```
163+
164+
##### `webpackMode`
165+
166+
Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
147167

148168
- `'lazy'` (default): Generates a lazy-loadable chunk for each `import()`ed module.
149169
- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. `` import(`./locales/${language}.json`) ``, where multiple module paths that can potentially be requested.
150170
- `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
151171
- `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
152172

153-
`webpackPrefetch`: Tells the browser that the resource is probably needed for some navigation in the future. Check out the guide for more information on [how webpackPrefetch works](/guides/code-splitting/#prefetchingpreloading-modules).
173+
##### `webpackPrefetch`
174+
175+
Tells the browser that the resource is probably needed for some navigation in the future. Check out the guide for more information on [how webpackPrefetch works](/guides/code-splitting/#prefetchingpreloading-modules).
154176

155-
`webpackPreload`: Tells the browser that the resource might be needed during the current navigation. Check out the guide for more information on [how webpackPreload works](/guides/code-splitting/#prefetchingpreloading-modules).
177+
##### `webpackPreload`
178+
179+
Tells the browser that the resource might be needed during the current navigation. Check out the guide for more information on [how webpackPreload works](/guides/code-splitting/#prefetchingpreloading-modules).
156180

157181
T> Note that all options can be combined like so `/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data" */`. This is wrapped in a JavaScript object and executed using [node VM](https://nodejs.org/dist/latest-v8.x/docs/api/vm.html). You do not need to add curly brackets.
158182

159-
`webpackInclude`: A regular expression that will be matched against during import resolution. Only modules that match **will be bundled**.
183+
##### `webpackInclude`
184+
185+
A regular expression that will be matched against during import resolution. Only modules that match **will be bundled**.
186+
187+
##### `webpackExclude`
160188

161-
`webpackExclude`: A regular expression that will be matched against during import resolution. Any module that matches **will not be bundled**.
189+
A regular expression that will be matched against during import resolution. Any module that matches **will not be bundled**.
162190

163191
T> Note that `webpackInclude` and `webpackExclude` options do not interfere with the prefix. eg: `./locale`.
164192

src/content/configuration/module.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,26 @@ Note that only `webpackIgnore` comment is supported at the moment:
166166
const x = require(/* webpackIgnore: true */ 'x');
167167
```
168168

169+
#### module.parser.javascript.dynamicImportFetchPriority
170+
171+
Specify the global [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) for dynamic import.
172+
173+
- Type: `'low' | 'high' | 'auto' | false`
174+
- Available: 5.87.0+
175+
- Example:
176+
177+
```js
178+
module.exports = {
179+
module: {
180+
parser: {
181+
javascript: {
182+
dynamicImportFetchPriority: 'high',
183+
},
184+
},
185+
},
186+
};
187+
```
188+
169189
#### module.parser.javascript.dynamicImportMode
170190

171191
Specifies global mode for dynamic import.

0 commit comments

Comments
 (0)