StencilJS疑问：仅调用单个图标为何编译时导入全部图标？

场景说明 #

我有一个存储图标对象的icons.js文件，其中仅导出一个用于返回指定图标的getIcon函数：

const getIcon = (icon) => icons[icon];

图标组件会导入该函数，并通过Prop传入图标名字符串调用它：

getIcon(this.icon);

疑问解答 #

疑问1：编译应用时是否会导入所有图标？除了从外部源获取图标，有没有编译时不全量导入图标的方法？ #

编译时会全量导入所有图标，因为icons对象是被整体引用的，打包工具无法提前预判this.icon的运行时动态取值，所以会把整个图标对象的代码都打包进去。

要实现编译时按需导入，可参考以下几种方案：

• 拆分单个图标文件：将每个图标单独存为一个文件（如icons/IconHome.js、icons/IconUser.js），在组件内使用动态导入语法加载：

  // 组件内的动态加载逻辑
  const loadIcon = async (iconName) => {
    const IconModule = await import(`../icons/Icon${iconName}.js`);
    return IconModule.default;
  };
  

  这种方式下打包工具会将每个图标拆分为独立代码块，仅在实际使用时加载对应图标。
• 借助打包/编译插件：使用支持按需导入的babel或打包工具插件，需提前将图标库按规范组织，让插件识别并仅引入用到的图标代码。
• 静态枚举图标映射：提前枚举所有可能用到的图标，在组件内构建静态映射表，配合Tree Shaking（需开启打包工具的Tree Shaking功能，且图标模块为ES模块导出）剔除未使用的图标：

  import IconHome from './icons/IconHome';
  import IconUser from './icons/IconUser';
  
  const iconMap = {
    home: IconHome,
    user: IconUser
  };
  
  const getIcon = (icon) => iconMap[icon];
  

疑问2：我们的图标仅约200KB，全量导入是否真的会造成大问题？ #

如果是压缩后的200KB，基本不会造成大问题：主流浏览器加载几百KB资源的速度很快，对常规网络环境下的用户来说，这个体积增量的感知极低。

如果是未压缩的200KB，建议先做压缩处理（JS用Terser压缩，SVG用SVGO压缩），压缩后体积会进一步减小。

是否需要优化还要结合实际场景：

• 若用户群体多处于移动网络较差的区域，或应用追求极致性能，按需导入更合适；
• 若图标数量稳定、后续不会大幅增长，全量导入反而能避免运行时的动态加载请求，提升使用体验。

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