Unused code is not removed from dynamic imports

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.

[alexander-akait]

bump

[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();

} );