Dynamic imports at build time Javascript

How can I statically import a specific package based on configuration at build time?

I am working on a project that has multiple uikits providing the same components in different styles. Each app is configured to use a specific uikit.

apps
    app_1
    app_2
packages
    uikit_1
        Component_1
        Component_2
    uikit_2
        Component_1
        Component_2

Javascript ES2020 provides dynamic imports:

const UIKIT= "uikit_1";

const {Component_1, Component_2} = await import(UIKIT);

Howerver, the import is executed in runtime so it could be slower than the static import. Since the configuration is not changing, I would like to statically import the appropriate uikit at build time to improve performance.

How can I achieve this?

You need to modify your build tool. For example, if you are using rollup or vite, you need read configuration in plugin and resolve placeholder in import. Actions would be different for different build tools.

example with rollup/plugin-alias

config = { 
 plugins: [
    alias({
      entries: [
       // will replace 'some/:uikit/component1' with 'some/concrete-uikit/component1' if UIKIT_DIRECTORY would be 'concrete-uikit'
       { find: ':uikit', replacement: process.env.UIKIT_DIRECTORY },
     ]
   })
 ]
}

example with webpack

module.exports = {
  //...
  resolve: {
    alias: {
      uikit: path.resolve(__dirname, process.env.UIKIT_DIRECTORY),
    },
  },
};