CODEWITHSUNDEEP
javascriptimportexportes6-moduleses6-module-loader
martinho
martinho

Reputation: 1016

(js): dynamically import modules

I am building the project structure and I was creating some modules, where I needed to import according to the route the user is on.

# my folder structure

modules
-- user
-- client
-- index

# my code 

// get constructor 
const  const constructor = await getConstructor( 'user' ); // get the constructor

// index
export const getConstructor = async ( module ) => {
    const constructor = await require(`./${module}`).create; // option 1 
    const constructor = await import(`./${module}`).then( constructor => constructor.create ); // option 2
    return constructor;
}


// module - user
const create = ( data ) => {
    // behavior
    // ...

}

export {
    create,
    delete,
    otherFunctions
}

My question is what is the best way, in terms of performance, to dynamically import the create function, whether option 1 or 2 or even if there is another way.

Any suggestion?

Upvotes: 0

Views: 133

Answers (1)

Ahmad Shaarawi
Ahmad Shaarawi

Reputation: 191

I think you should take a look at es-module loader, it is a way for managing asynchronous imports 'Lazy loading', and in terms of performance, I think also this is good solution. Which lead us to your second option.

If you are using a webpack, you can take a look of a concept called Code splitting.

Upvotes: 1

Related Questions