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

rxliuli commented 2 years ago

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!

[vite.log](https://github.com/vitejs/vite/files/9009065/vite.log)

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.

bluwy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

换个包管理工具试试，我使用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

rxliuli commented 2 years ago

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 commented 1 year ago

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

Mr-SPM commented 1 year ago

+1 , please fix it .

tastycrayon commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

vitejs / vite