当前位置: 首页 > 知识库问答 >
问题:

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

戚云
2024-04-12

如题,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>

共有1个答案

鲍建业
2024-04-12

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

 类似资料:
  • 问题内容: 我在玩和使用和。我想在不同的文件中构建多个组件,将其导入单个文件并将其捆绑在一起 假设我有几个这样的组件: my-navbar.jsx main-page.jsx 使用webpack并按照其教程进行操作,我有: 构建项目并运行它之后,在浏览器控制台中出现以下错误: 我究竟做错了什么?如何正确导入和导出组件? 问题答案: 尝试 默认设置 组件中的导出: 通过使用默认值,您表示将成为该模块

  • 问题内容: 有人可以为我提供关于类对象的一些指导,以及如何在我的项目中的另一个对象中引用它吗? 这是我的对象-request-api.js(注意:我知道它还没有进行很多操作,但是我想走路之前要走路) 这是我试图在其中引用的React Class组件: 我的React Component Class对象出现错误: 谁能为我提供一些见识/帮助? 问题答案: 由于不是静态方法,因此您需要先创建的实例,然

  • 问题内容: 尝试做一些我想会很简单的事情。我想导入一个现有的JavaScript库,然后调用它的函数。因此,例如,我想导入blah.js,然后调用blah()。 只是想知道要完成这项工作我需要做什么神奇的组合。也许我只是错过了重点。该示例给出错误“ TypeError:_blah.blah未定义”。 问题答案: 命名出口: 假设您创建了一个名为的文件,其中包含您希望其他模块(例如React组件)可

  • 用例很简单:我只想导出一个名称与导入时相同的对象。 例如: 但这并不起作用。我必须写: 但这很奇怪。正确的方法是什么? 更新: 感谢帮助和参考。我用许多线索解决了我的问题。下面给大家分享一些我常见的案例和解决方法。

  • 我在WebPack上使用jquery时遇到了一个问题。我的代码: 当编译上述代码时,控制台抛出此错误 vendor.js:1未捕获的引用Error:未在vendor.js:1中定义webpackJsonp

  • 问题内容: 因此,这是我当前通过ES6导入Webpack中的图像和图标的工作流程: 这变得很快。这就是我想要的: 我觉得必须有某种方法可以动态地从特定目录中导入所有文件(不带扩展名),然后根据需要使用这些文件。 任何人都看过此事,或者对最佳解决方案有任何想法? 更新: 使用选择的答案,我能够做到这一点: 问题答案: 我觉得必须有某种方法可以动态地从特定目录中导入所有文件(不带扩展名),然后根据需要