Introduce compressAsyncImports option into webpack5-module-minifier plugin
#4591
Conversation
TheLarkInn
requested review from
iclanton,
octogonz,
apostolisms,
D4N14L and
dmichon-msft
as code owners
| sources | ||
| } from 'webpack'; | ||
|
|
||
| import { Template, dependencies } from 'webpack'; |
There was a problem hiding this comment.
You can fix this import by defining the classes inside of apply; that's what I did in another recent plugin with custom Dependency classes.
webpack/webpack5-module-minifier-plugin/src/AsyncImportCompressionPlugin.ts
Outdated
Show resolved
Hide resolved
webpack/webpack5-module-minifier-plugin/src/AsyncImportCompressionPlugin.ts
Outdated
Show resolved
Hide resolved
| return source; | ||
| } | ||
|
|
||
| localImports = asyncImportMap.get(context.module); |
There was a problem hiding this comment.
How is this impacted by multiple runtimes in the same compilation?
webpack/webpack5-module-minifier-plugin/src/AsyncImportCompressionPlugin.ts
Outdated
Show resolved
Hide resolved
webpack/webpack5-module-minifier-plugin/src/AsyncImportCompressionPlugin.ts
Show resolved
Hide resolved
|
|
||
| meta.count++; | ||
|
|
||
| const stringKey: string = `${targetModule.id}`.replace(/[^A-Za-z0-9_$]/g, '_'); |
There was a problem hiding this comment.
targetModule.id is deprecated. Value has to come from chunkGraph.getModuleId(targetModule)
| const moduleId: string | number = chunkGraph.getModuleId(targetModule); | ||
| const stringKey: string = `${moduleId}`.replace(/[^A-Za-z0-9_$]/g, '_'); | ||
| const key: string = `${ASYNC_IMPORT_PREFIX}${stringKey}`; | ||
| const content: string = `__webpack_require__.ee(${key})`; |
There was a problem hiding this comment.
__webpack_require__.ee should get extracted to a constant and used as a key in chunk runtime requirements, then tap the runtimeRequirementInTree hook map for that value to add the relevant runtime module.
There was a problem hiding this comment.
Also consider using E instead of ee
| `];`, | ||
| `${requireFn}.ee = function (groupOrId, moduleId, importType) {`, | ||
| Template.indent([ | ||
| `return Promise.all((Array.isArray(groupOrId) ? groupOrId : asyncImportChunkGroups[groupOrId]).map(function (x) { return ${requireFn}.e(x); }))`, |
There was a problem hiding this comment.
There's a simpleFunction helper to emit functions or lambdas depending on target.
| dependencyTemplates.set(ImportDependency, customTemplate); | ||
| }); | ||
|
|
||
| compilation.mainTemplate.hooks.requireExtensions.tap(PLUGIN_NAME, (source, chunk) => { |
There was a problem hiding this comment.
We should be defining a runtime module for this instead.
| const targetModule: Module = moduleGraph.getModule(dep); | ||
|
|
||
| if (targetModule) { | ||
| const moduleId: string | number = chunkGraph.getModuleId(targetModule); |
There was a problem hiding this comment.
One of the lines in here should be:
dependencyTemplateContext.runtimeRequirements.add(COMPRESSED_ASYNC_IMPORT_FUNCTION);Where const COMPRESSED_ASYNC_IMPORT_FUNCTION = '__webpack_require__.E'
…sionPlugin.ts Co-authored-by: David Michon <[email protected]>
…sionPlugin.ts Co-authored-by: David Michon <[email protected]>
…sionPlugin.ts Co-authored-by: David Michon <[email protected]>
The webpack 4 module minifier plugin used to have a
compressAsyncImportsfeature which would optimize the callsites whereimport()'s to produce smaller bundles.This PR introduces that feature into the webpack5-module-minifier plugin.