Closed guangzan closed 2 years ago
有示例仓库吗?我们没有复现
没有复现+1。
btw,非常慢,这个指标的变化幅度大概是值什么量级。有具体的数值吗?
另外是否尝试过用排除法,是否有用别的编译插件,是否他们处理了对应的 code transform 或者 compile
vite 启动 dev server 都非常快,描述中的慢是指首次启动时,打开浏览器到显示出界面。
通过 pnpm create vite
新建两个项目 react + ts,两个项目分别安装 semi、arco(作为对照),App.tsx 分别导入 Button 组件,替换默认模板 HTML button 标签。
首次启动 vite + semi 从白屏到能看见欢迎界面在3分钟左右。 vite + arco 在 3s 左右。
别用pnpm试试?yarn或者直接npm也一样吗? (控制变量排除一下看看)
用 yarn 或 npm 确实快了很多(load: 1分钟+)。
get,@DaiQiangReal 在看这个问题了
@guangzan 麻烦再帮测试一下这个版本可以吗?@douyinfe/semi-ui@2.19.1-alpha.0 做了一些改动,我本地测试 Network里看@douyinfe/semi-ui.js 这个module 之前的构建速度是8s,目前是2s
我们本地机子首次构建倒没到1 or 3min这么高的等待时长,但这个可能也跟机器配置相关。需要综合看下。
我们本地机子首次构建倒没到1 or 3min这么高的等待时长,但这个可能也跟机器配置相关。需要综合看下。
是的,确实与机器配置有很大关系。我的机器有些老:
处理器 Intel(R) Core(TM) i7-2760QM CPU @ 2.40GHz 2.40 GHz
机带 RAM 12.0 GB
系统类型 64 位操作系统, 基于 x64 的处理器
但是通过与引入的其他组件库进行对比(上面只对比了 arco),同样在都只导入 Button 组件的前提下,pnpm + vite + semi 冷启动时间为 3分钟左右,pnpm + vite + arco-react 只需要 3s 左右。
👍 @douyinfe/semi-ui@2.19.1-alpha.0 在我这台机器上,冷启动时间缩短了1分钟+ !,现在页面 load 时间是 1.77 分钟。
用 yarn,冷启动时间现在只有 30s+!
@douyinfe/semi-ui@2.19.1-alpha.2 (相比alpha.0,移除了 semi-animation-react 相关的polyfill)
这个应该会有一些提升,但幅度可能不是很大了。
最早的版本会包含 corejs的polyfill,vite应该是又额外 compile了一下 corejs的内容,所以导致构建时长被拉长。
另外就是我们用的 lodash,而不是lodash-es,所以它也会转一次 cjs > esm,这里应该也有一定耗时。(实际上我们过去几年一直就是lodash-es的,但是因为需要兼容 nextJs的 使用,开源后又换回了 lodash。这个优化的空间不大了)
还有的话,除非我们将所有module 打成单个 esm module(目前是多个文件),这种做法应该也有较明显的提升。但是这个会改变产物目录结构,对现有用户会有一些影响。目前我们应该不考虑这么干。
另外,与 arco 的区别还有另外一个点:arco 侧是让用户自己在全局import css,要实现按需加载的话还需要配合 babel-plugin-import 使用,而 semi是每个组件的js 负责import 自己的css,用户只关心组件,不关心样式文件到底怎么处理。
在 vite dev场景下,就会有一个明显的区别,semi 会多很多 css 的请求,相应首次构建时长肯定也会有影响。(所以这个应该也会是你测试中,两个库表现会有区别的其中一个主要原因)
但在 webpack 场景不会,并且对于webpack场景,由 js / jsx 自己负责对应 import css 在使用上会省心很多。 这里相当于 是trade off,我们后续也不计划修改样式文件的引入方式。
谢谢您的回复,但对我我这台老机器来说,我就得冷启动时间在1分钟多是完全可接受的,三分钟甚至更久会让我觉得哪里出了问题。所以,这个优化对于 semi 来说是可选的或者本来没必要做的。再次感谢!
同样的问题+1,我的机器不算太老,cpu:i5-9300H,启动后,terminal显示已经启动完成,但是页面白屏,等待一会还是出不来,于是杀掉terminal进程,重新启动,反复几次,最后直接摆烂,启动后不管了,等了将近一分钟后才出现页面
我觉得最坑爹是,terminal已经显示启动完成了,页面却是白屏。如果像webpack那样,terminal显示一直在打包,打包一分钟这个其实是可接受的。vite这样表现,在没有经验的情况下,只会怀疑是哪里出了问题。
同样的问题+1,我的机器不算太老,cpu:i5-9300H,启动后,terminal显示已经启动完成,但是页面白屏,等待一会还是出不来,于是杀掉terminal进程,重新启动,反复几次,最后直接摆烂,启动后不管了,等了将近一分钟后才出现页面
我觉得最坑爹是,terminal已经显示启动完成了,页面却是白屏。如果像webpack那样,terminal显示一直在打包,打包一分钟这个其实是可接受的。vite这样表现,在没有经验的情况下,只会怀疑是哪里出了问题。
这个就是构建工具本身的设定了,vite首次构建时,默认是请求后才构建。启动dev server与dependency构建是不互相阻塞的。跟webpack是有区别的。
2.19已经合入相关改动,其他剩余改进空间不大了。这个issue我就先关掉了。
Is there an existing issue for this?
Which Component
all
Semi Version
latest
Current Behavior
No response
Expected Behavior
No response
Steps To Reproduce
ReproducibleCode
No response
Environment
Anything else?
试了下 arco-react 就不会出现这种情况。