Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce compressAsyncImports option into webpack5-module-minifier plugin #4591

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

TheLarkInn
Copy link
Member

The webpack 4 module minifier plugin used to have a compressAsyncImports feature which would optimize the callsites where import()'s to produce smaller bundles.

This PR introduces that feature into the webpack5-module-minifier plugin.

sources
} from 'webpack';

import { Template, dependencies } from 'webpack';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

return source;
}

localImports = asyncImportMap.get(context.module);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How is this impacted by multiple runtimes in the same compilation?


meta.count++;

const stringKey: string = `${targetModule.id}`.replace(/[^A-Za-z0-9_$]/g, '_');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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})`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

__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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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); }))`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One of the lines in here should be:

dependencyTemplateContext.runtimeRequirements.add(COMPRESSED_ASYNC_IMPORT_FUNCTION);

Where const COMPRESSED_ASYNC_IMPORT_FUNCTION = '__webpack_require__.E'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In Progress
Development

Successfully merging this pull request may close these issues.

2 participants