Vite + Svelte中如何仅打包实际执行的条件动态导入模块？

核心问题在于Vite底层的Rollup做静态分析时，无法确定对象中哪个导入函数会被调用，因此会打包所有关联模块；而if(false)属于明确的死代码，会被tree-shaking移除，对应导入不会被打包。要实现仅打包实际执行的模块，可以用以下几种方式：

1. 基于__CONFIG__的静态条件判断 #

直接用__CONFIG__的值做条件分支，构建时替换__CONFIG__后，Rollup会识别出死代码分支并移除，对应模块不会被打包。示例代码：

const builder = async () => {
  let Component;
  if (__CONFIG__.template === 'basic') {
    Component = (await import('./BasicTemplate.svelte')).default;
  } else if (__CONFIG__.template === 'advanced') {
    Component = (await import('./AdvancedTemplate.svelte')).default;
  }

  new Component({
    target: document.getElementById('app'),
  });
};

builder();

比如构建时将__CONFIG__替换为{template: 'advanced'}，Rollup会自动剔除basic分支的代码及对应导入，最终只打包AdvancedTemplate.svelte。

2. 动态导入路径拼接（需文件名匹配规则） #

如果模板文件名与配置值有固定对应关系，可以用__CONFIG__动态拼接导入路径，Rollup会基于静态分析后的路径只打包对应模块：

const builder = async () => {
  const Component = (await import(`./${__CONFIG__.template}Template.svelte`)).default;
  new Component({
    target: document.getElementById('app'),
  });
};

builder();

这种方式要求配置值（如basic/advanced）与文件名前缀严格对应，且构建时__CONFIG__.template是静态可解析的值。

3. 自定义插件增强静态分析（针对对象映射场景） #

如果必须保留对象映射的写法，可以在自定义Vite插件的transform钩子中，根据__CONFIG__的值修改代码，移除对象中未被使用的导入函数。比如原代码中的imports对象，插件处理后仅保留需要的属性：

// 插件处理后的代码
const getAdv = () => import('./AdvancedTemplate.svelte')

const imports = {
  'advanced': getAdv,
}

这样Rollup只会处理保留的导入函数，未被保留的模块不会被打包。

内容的提问来源于stack exchange，提问作者Georgy