javascript - 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处理，而且图片越多越卡