CODEWITHSUNDEEP
javascriptreactjswebpackecmascript-6
Ilja
Ilja

Reputation: 46509

import() equivalent of import { something } from 'somewhere';

I've got a file that exports few components that can be imported easily via

import { component1, component2 } from './components'

However now need to load them asynchronously and webpack allows us to split files into nice chunks using import() but I can't figure out if I can import() just a single component from ./components. Alternative would be to place them into separate files, but wanted to check if it is possible via import() first.

Upvotes: 1

Views: 60

Answers (1)

CodingIntrigue
CodingIntrigue

Reputation: 78555

Although import() does give you all exports by default, you can use destructuring to pick the imports you want:

import("./components")
    .then(({ component1 }) => {
        console.log(component1);
    });

Bundlers should be able to apply tree shaking against this code and determine that only component1 is used - however I'm not entirely sure if the current version of Webpack does this. It will definitely create a separate chunk for ./components at the very least.

Upvotes: 1

Related Questions