Vitejs 正在加载整个包大小而不是所选的包大小

Question

我正在使用 vue 3 和 vite。我注意到一些奇怪的事情。哦，vue 图标正在加载大约 108 MB 的包大小，即使在 vitejs 中也需要花费大量时间来加载。这是我的设置

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube,
} from 'oh-vue-icons/icons'

// register the icons
addIcons(
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube
)

const app = createApp(App)
app.component('VIcon', OhVueIcon)
app.mount('#app')

然后在我的组件中：

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube,
} from 'oh-vue-icons/icons'

// register the icons
addIcons(
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube
)

const app = createApp(App)
app.component('VIcon', OhVueIcon)
app.mount('#app')

您可以看到下面的问题。我有条件控制这六个图标。这就是为什么每张卡片只有一两个图标的原因。

为什么它加载 108 MB 的 JavaScript？这没有任何意义。我还在 vue3 中使用 vite。我需要添加任何额外的配置吗？

提前致谢。

Answer 1

来自Vite 文档：

\n

\n

性能： Vite将内部多个模块的ESM依赖关系转换为单个模块，以提高后续页面加载性能。

\n

一些软件包将其 ES 模块构建为许多相互导入的单独文件。例如，lodash-es有超过600个内部模块！当我们这样做时import { debounce } from \'lodash-es\'，浏览器会同时发出 600 多个 HTTP 请求！尽管服务器处理它们没有问题，但大量请求会在浏览器端造成网络拥塞，导致页面加载速度明显变慢。

\n

通过预先捆绑lodash-es到单个模块中，我们现在只需要一个 HTTP 请求！

\n

\n

oh-vue-icons/icons 包含许多Vite在启动时预先捆绑的文件。

\n

由于您实际上并不需要预先捆绑图标，因此您可以选择退出预先捆绑optimizeDeps.exclude：

\n

// vite.config.js\nimport { defineConfig } from \'vite\'\n\nexport default defineConfig({\n  \xe2\x8b\xae\n  optimizeDeps: {\n    exclude: [\'oh-vue-icons/icons\']\n  }\n})\n

\n

演示

\n