Webpack会对switch语句内未使用的代码进行代码分割吗？

默认情况下，你未使用的close分支代码一定会被全量加载。

核心原因 #

当前Webpack、Vite、Rollup等主流前端构建工具的默认摇树（Tree Shaking）优化，仅能处理顶层ES模块导入导出层面的未引用代码，无法深入到组件内部的逻辑分支做静态剔除。
你代码中switch的分支判断依赖运行时传入的name参数，构建阶段无法预判你实际会传入的取值，因此只能将所有case的代码完整打包进最终产物，未用到的close分支对应的SVG代码自然也会被包含在内。

按需加载优化方案 #

如果要实现仅打包用到的图标，可采用两种常见方案：

• 拆分独立图标模块导出
  将每个图标拆为单独的ES模块，统一在入口文件导出：

  // icons/index.js
  export { default as Tick } from './tick.svg';
  export { default as Close } from './close.svg';
  // 其余图标依次导出
  

  业务页面使用时按需引入对应图标即可，未被引入的图标会被摇树优化直接剔除，不会进入最终产物。
• 借助构建插件自动按需注入
  如果不想改动现有Icon组件的调用方式，可以使用unplugin-icons这类构建插件，在构建阶段静态分析代码中用到的图标名称，自动注入对应图标代码，剔除所有未使用的分支内容。

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