Pre-bundling is very slow when including ant-design-vue

[rxliuli]

Describe the bug

As the title says, when I include ant-design-vue, in my tests, it takes about 41.13s, which is very, very slow.

A reproducible project: https://github.com/rxliuli/vite-vue-perf-demo, in fact, I only refer to the Button component

import { createApp } from 'vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
import { Button } from 'ant-design-vue'

console.log(Button)
createApp(App).mount('#app')

The log is obtained using the following command

pnpm vite --debug --force 2>&1 | tee vite.log

I observed that when the library contains a lot of code like import isPlainObject from 'lodash-es/isPlainObject';, vite goes to every file, which is very, very slow, as you can see from the log @ ant-design/icons-vue appears 104 times, while @ant-design/icons-svg appears 1578 times.

When I tried to rewrite import isPlainObject from 'lodash-es/isPlainObject'; to import { isPlainObject } from 'lodash-es'; using the esbuild plugin, the performance became acceptable (it only took a few seconds) .

My question now is, if there is such a dependency, can vite do some automatic optimizations, in fact echarts/maplibre-gl has a similar problem, or do I need to make separate PRs for these projects?

ref: #7857 (comment)

Reproduction

https://github.com/rxliuli/vite-vue-perf-demo

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 38.26 GB / 63.87 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    vite: ^2.9.9 => 2.9.13

Used Package Manager

pnpm

Logs

Click to expand!

vite.log

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

It seems to take 2.2s to prebundle for me according to the logs. (macos m1) And according to the logs given, looks like each vite resolve is taking around 100-2000ms to do so, which isn't good. For me it's around 0.1-25ms per resolve. I think this might be an issue with windows specifically, and maybe we're doing expensive fs calls in it.

[martonx]

On windows Vite v3 is f....king slow. I must to switch back to 2.x. Please do anything to reach the speed of 2.x!

[hemengke1997]

On windows Vite v3 is f....king slow. I must to switch back to 2.x. Please do anything to reach the speed of 2.x!

🤣 But this issue is about vite 2.9.9, not 3.x

[brillout]

@bluwy I'm afraid this also seems to happen on Linux, see following reproduction: https://github.com/brillout/vps-antd-repo.

@rxliuli The culprit doesn't seem to be the pre-bundling scanner (you can inspect it by using the debug flag $ DEBUG=vite:deps vite).

But this issue is about vite 2.9.9, not 3.x

What @hemengke1997 means here is Vite 2 as well: the problem seems to affect both Vite 2 and Vite 3. (The reproduction above uses Vite 3.)

[core-admin]

换个包管理工具试试，我使用pnpm安装的依赖，在冷启动阶段长达1分钟多，我后来换成了npm，发现冷启动快多了，不知道什么问题，其中@ant-design/icons-vue 目前是被rollup全量处理的，可以看下这个issues：https://github.com/vueComponent/ant-design-vue/issues/5822。

---

Try another package management tool. I used the dependency of pnpm installation, which lasted for more than 1 minute in the cold start phase. Later, I changed to NPM, and found that the cold start was much faster. I don't know what the problem was. Among them, @Ant design / icons Vue is currently fully handled by rollup. You can see this issue: vueComponent/ant-design-vue#5822

[rxliuli]

This issue doesn't seem to be resolved, currently, the cold start speed has been as high as 1min, and vite seems to be no longer available on large projects

[IcanPressF]

problem is not resolved,still, does anyone has any fix for this?

[tastycrayon]

this seem to occur on my end after adding port -p 5173.

My sveltekit environment

// package.json
{
  "name": "client",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "format": "prettier --plugin-search-dir . --write .",
    "codegen": "graphql-codegen --config codegen.yml"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "2.15.0",
    "@graphql-codegen/typed-document-node": "^2.3.10",
    "@graphql-codegen/typescript": "2.8.3",
    "@graphql-codegen/typescript-operations": "^2.5.8",
    "@picocss/pico": "^1.5.6",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.5.0",
    "@types/three": "^0.146.0",
    "prettier": "^2.8.1",
    "sass": "^1.58.3",
    "bootstrap": "^5.2.3",
    "svelte": "^3.54.0",
    "svelte-check": "^3.0.1",
    "tslib": "^2.4.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "@urql/exchange-auth": "^1.0.0",
    "@urql/svelte": "^3.0.1",
    "graphql": "^16.6.0",
    "gsap": "^3.11.4",
    "jwt-decode": "^3.1.2",
    "three": "^0.147.0"
  },
  "type": "module"
}

// vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  optimizeDeps: {
    exclude: ["@urql/svelte"],
  },

  resolve: {
    alias: {
      $components: path.resolve("./src/components"),
      $lib: path.resolve("./src/lib"),
    },
  },
};

export default config;

[Lantianyou]

Hi, I found putting npm packages like @ant-design/icons into optimizeDeps really help. I guess the slow cold start is caused by this mentioned by docs.

optimizeDeps: {
		include: ['@ant-design/colors', '@ant-design/icons', 'lodash-es', '@reduxjs/toolkit', '@ant-design/icons/es/icons'],
	}

[Lantianyou]

Hi @rxliuli
Maybe change your vite.config.ts into this can help https://github.com/vueComponent/ant-design-vue/blob/0a610d818f4583c8cec5afb8d3adb38720f708f4/site/vite.config.ts#L33