es6如何既实现动态导入又不走 webpack 分割打包？

Question

如题，vue3 项目，封装了一个 icon-svg.vue 的组件，用于根据传入的 iconName 来展示对应的 svg，svg 展示根据 webpack 配置 svg-sprite-loader loader，es6如何既实现根据传入的 iconName 动态导入又不走 webpack 分割打包？因为只要使用了 动态导入 import，则webpack 会把 svg 所有文件都各自打包一份出来，如果使用静态导入，则需要知道一个页面用到了哪些 icon，需要单独导入比较费时费力，如果统一全部导入 比如 import '@/assets/icons' 则会导入许多无用的 icon。

icon-svg.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
import { withDefaults, computed, onMounted } from 'vue'

interface Props {
  name?: string;
}

const props = withDefaults(defineProps<Props>(), {
  name: ''
})

const iconName = computed(() => {
  return `#icon-${props.name}` + (props.disabled ? '-disabled' : '')
})

const svgClass = computed(() => {
  return {
    'svg-icon': true,
    [props.className]: !!props.className,
    disabled: props.disabled
  }
})

async function loadIcon (name:string) {
  await import(`@/assets/icons/svg/${name}.svg`)
}

onMounted(() => {
  loadIcon(props.name)
})

</script>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

Answer 1

静态资源放在public下就行。src下的所有资源都会被webpack处理，而且图片越多越卡