Skip to content

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

@rxliuli

Description

@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.

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: deps optimizerEsbuild Dependencies OptimizationperformancePerformance related enhancement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions