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

Question

我在 vite 中使用 vue 3。我注意到了一些奇怪的事情。哦，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')

然后在我的组件中：

<VIcon name="fa-facebook-square" />
<VIcon name="fa-youtube" />
<VIcon name="fa-instagram" />
<VIcon name="fa-quora" />
<VIcon name="fa-linkedin" />
<VIcon name="fa-twitter" />

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

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

提前致谢。

Answer 1

来自Vite docs：

Performance: Vite converts ESM dependencies with many internal modules into a single module to improve subsequent page load performance.

Some packages ship their ES modules builds as many separate files importing one another. For example, lodash-es has over 600 internal modules! When we do import { debounce } from 'lodash-es', the browser fires off 600+ HTTP requests at the same time! Even though the server has no problem handling them, the large amount of requests create a network congestion on the browser side, causing the page to load noticeably slower.

By pre-bundling lodash-es into a single module, we now only need one HTTP request instead!

oh-vue-icons/icons contains many files Vite 在启动时 pre-bundling。

由于您真的不需要预先捆绑图标，您可以通过 optimizeDeps.exclude:

选择退出预先捆绑

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  ⋮
  optimizeDeps: {
    exclude: ['oh-vue-icons/icons']
  }
})

demo

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

Vitejs is loading the whole bundle size instead of the selected ones

javascript

vue.js

vuejs3

vite