Lazy loading only required exports from dynamic import()

[pushkar100]

PR for the feature request #10959 (resolves #10959)

Adding magic comments to lazy load only named exports from a dynamically imported module.
Introducing webpackExports: "<name>" or webpackExports: ["<name1>", "<name2>"]

At present, the entire module is exported. With this feature, we can reduce the code we import (i.e chunk files of smaller size are created)

What kind of change does this PR introduce?
feature

Did you add tests for your changes?
Yes (will add more when required)

Does this PR introduce a breaking change?
No

What needs to be documented once your changes are merged?

• Addition to Webpack magic comments
• Benefit of using webpackExports

[webpack-bot]

For maintainers only:

• This needs to be documented (issue in webpack/webpack.js.org will be filed when merged)
• This needs to be backported to webpack 4 (issue will be created when merged)

[alexander-akait]

I think supporting import { something } from /* webpackExports: "something" */ 'package'; should be good feature too

[webpack-bot]

@pushkar100 Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@sokra Please review the new changes.

[alexander-akait]

@pushkar100 What about if I want to export something as default - import(webpackExports: "customFunction").then((myFunction) => myFunction())?

[pushkar100]

@evilebottnawi I did think about it. The import() proposal is supposed to return a promise for the module namespace object which contains all the exports including "default" (Please correct me if I am wrong). Won't we be creating an alternative pattern by resolving directly to the default export instead of the module object itself?
The idea I currently have for accessing default export is:

import(/* webpackExports: "default" */ "./module")
.then(module => {/* only module.default is available */})

[sokra]

The code should keep working even if the comment is ignored (e.g. in native esm). So even if you only request a single export please return a namespace object for compat with native esm.

[sokra]

One can use destructing for shorter syntax: import("module").then(({ default: theDefaultExport }) => doSomething(theDefaultExport)) or const { default: theDefaultExport } = await import("module")

[pushkar100]

@sokra @evilebottnawi I have prevented mangling of exports when webpackExports is used.
Also, added basic tests for checking unmangled names and default exports.

Now we can use webpackExports: "default" to get only the default export.

[sokra]

A little bit refactoring to getReferencedExports is needed to allow to pass the mangling info.

[pushkar100]

@sokra I have refactored the code: using an object for referenced exports with canMangle option.
Fixed the basic test cases (weak mode & removal of "not" from title).

[pushkar100]

@sokra I've incorporated the type and refactoring changes.

An additional change in WasmFinalizeExportsPlugin.js was required so that jsIncompatibleExports[name] does not throw type related error on receiving an object

[webpack-bot]

Thank you for your pull request! The most important CI builds succeeded, we’ll review the pull request soon.

[sokra]

Thanks