Unused code is not removed from dynamic imports

[gkjohnson]

Feature request

What is the expected behavior?

Dynamic imports should have unused code removed the way regular imports do. Currently if you export two functions from a dynamically imported file and only ever use 1 of them the unused function will not be removed. Consider the following example:

// dynamic.js
export function usedFunction() { console.log( 'USED' ); };

export function unusedFunction() { console.log( 'UNUSED' ); };

// index.js
import( './dynamic.js' ).then( ( { usedFunction } ) => {

    usedFunction();

} );

After bundling the above files "unusedFunction" will still be included in the built dynamic.js chunk. However "unusedFunction" is removed when using import { usedFunction } from './dynamic.js';.

(tested with the latest webpack, webpack-cli)

What is motivation or use case for adding/changing the behavior?

I would like to remove as much code as possible even from the dynamically imported files to reduce the download and parse time overhead.

How should this be implemented in your opinion?

Dynamic imports should have unused code removed the way regular imports do by inspecting the fields used after running the import.

Are you willing to work on this yourself?

Unfortunately I don't think I'll be able to.

[sokra]

This is too complex to statically analyse, so webpack doesn't know which exports are used.

You can tell it manually like that:

// index.js
import(/* webpackExports: "usedFunction" */ './dynamic.js' ).then( ( { usedFunction } ) => {

    usedFunction();

} );

[gkjohnson]

I did expect that handling every scenario would be too complicated but what about supporting a limited syntax for this? Limited syntax support works pretty well for WebWorkers. The magic comments you suggest are nearly like the immediate destructuring case and seems like the used exports could be derived in this case but I'm not an expert in this area:

const { usedFunction } = await import( './dynamic.js' );

// or

import( './dynamic.js' ).then( ( { usedFunction } ) => { /* ... */ } );

Either way I appreciate your response!

[sokra]

Yes we probably want to implement the await syntax eventually

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[vankop]

bump

[vankop]

closing in favor of #14800