vite 使用 antd 时, 在开发的首次启动非常慢

deng-yc commented 2 years ago

Describe the bug

使用 antd以及@antd-design/icons 首次启动非常慢,大概5分钟以上

Reproduction

https://github.com/deng-yc/vite-antd

Steps to reproduce

重现步骤

使用vite创建一个新的 react-ts 项目
添加antd依赖
随便写点antd的组件
执行 dev 命令
浏览器需要比较长的时间才能看到页面内容

影响速度的地方应该是预编译依赖包

可以通过以下代码临时解决在开发时慢

{
  ...
  resolve:{
       alias:{
           antd: path.join(__dirname, 'node_modules/antd/dist/antd.js'),
           '@ant-design/icons': path.join(__dirname,'node_modules/@ant-design/icons/dist/index.umd.js'),
       }
   }
   ...
}

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 6.15 GB / 15.73 GB
  Binaries:
    Node: 16.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\devenv\nodejs\global\yarn.CMD
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.56)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Logs

No response

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.

CharlexChen commented 2 years ago

由于依赖预构建是从项目entry处扫描源码收集第三方库依赖信息后，基于这部分信息对第三方库进行预构建，构建过程中会对关联到的第三方库模块文件基于es-module-lexer进行文件解析（拿到export、import）再往深层次模块文件构建打包，期间由于需要保证构建产物功能的全面，暂时无法进行预构建期间的TreeShaking

经验证，确实由于在预构建@ant-design/icons第三方库时，对es/icons进行了全引入构建，esbuild的build-api耗时较高，最终导致bundle时间较长，对于此目前解决方案是采用alias直接指定viteDevServer可识别的产物路径(path含node_modules)以绕过@ant-design/icons包全亮预构建流程，当访问到的页面加载到与之相关的组件时，Vite会进行加载

Lastor-Chen commented 1 year ago

Same issues.

Temporary fixed it by set path alias for antd and antd icons. If use reset.css of antd, have to adjust the alias like this:

// main.jsx
import 'antd/dist/reset.css'

// vite.config.js
resolve: {
  alias: {
    // ...
    'antd/dist/reset.css': path.join(__dirname, 'node_modules/antd/dist/reset.css'),  // <-- add this
    antd: path.join(__dirname, 'node_modules/antd/dist/antd.js'),
    '@ant-design/icons': path.join(__dirname,'node_modules/@ant-design/icons/dist/index.umd.js'),
  },
}

patak-dev commented 1 year ago

Tested with 4.3.0-beta.3 and the performance issue is now solved. Check out the changelog for perf PRs that got us to this result.

JieyueCoding commented 1 year ago

I have been troubled for a long time and finally found a solution here. After I introduced @vicons into the vue project, every time I rebuild the package, the first time I start the project, the screen will be white for more than ten minutes. Upgrading to the latest version was solved

Lastor-Chen commented 1 year ago

Thank you very much for releasing vite v4.3.1. It has improved the speed significantly.

Tested on the same development project on Windows 10.

System:
  OS: Windows 10
  CPU: AMD Ryzen 5 3600 6-Core Processor 3.59 GHz
  Memory: 16.0 GB
Browsers:
  Chrome: 112.0.5615.138 (64bit)
Binaries:
  Node: 18.14.0
  pnpm: 8.3.1

run command.

$ pnpm vite --force

The time it takes until the page is displayed. (with antd v5.2.1)

	Cost
Vite v4.1.0	67 sec
Vite v4.3.1	2.5 sec

vitejs / vite