vite
vite copied to clipboard
vitejs
Pre-bundling is very slow when including ant-design-vue
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: https://github.com/vitejs/vite/discussions/7857#discussioncomment-3045849
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!
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] 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.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
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.
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!
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
@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.)
换个包管理工具试试，我使用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: https://github.com/vueComponent/ant-design-vue/issues/5822
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
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;
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'],
}
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