使用按需引入时，首次启动服务会依赖预构建style

CrabSAMA commented 2 years ago

问题现象：使用 ant-design-vue + vite ，使用按需引入的方式，当首次启动 vite 服务时会对 style 进行依赖预构建，并且在切换不同路由时如果其他模块有使用到新的组件，页面会卡住直至 dependencies optimized 完成。疑问：想知道这个是 vite 的问题还是这个组件的问题呢？有什么办法可以解决吗？

插件使用：

yangss3 commented 2 years ago

我试了一下，element-plus 也有同样的问题，首次启动或者遇到新组件，加载会很慢。但是比 ant-design-vue 快一些，不知道是插件的问题还是组件的问题

CrabSAMA commented 2 years ago

@antfu 大佬cc

lvjiaxuan commented 2 years ago

我试了一下，element-plus 也有同样的问题，首次启动或者遇到新组件，加载会很慢。但是比 ant-design-vue 快一些，不知道是插件的问题还是组件的问题

原来是这样，我以为卡死了

lvjiaxuan commented 2 years ago

我试了一下，element-plus 也有同样的问题，首次启动或者遇到新组件，加载会很慢。但是比 ant-design-vue 快一些，不知道是插件的问题还是组件的问题

研究了下。发现是 antdv 使用了 babel-runtime，估计是巨多的 helps 函数导致 Vite 首次进行 Pre-Building 时极慢（表层原因是这个）。看了下element-plus、vant、arco 就没有太多依赖，就快点。

方案的话：

换其他UI
AntDesignVueResolver 就不要用了，因为每次新增组件都要 Pre-Building，然后换为手动按需引入的方式，首次 Pre-Building 会痛苦一点，后面靠缓存速度就恢复正常。还挺坑的我擦。

xwnwho commented 2 years ago

我也遇到了，使用的是ant-design-vue,有时候会导致menu菜单选中了，但是路由不会跳转（本地环境和正式环境都出现过）

hminghe commented 2 years ago

我在用element-plus 开发也发现了这个问题，按需导入的新组件多就会卡死和刷新页面。最后的解决方案是开发用全量导入组件，打包用按需导入。可以参考一下我的修改 https://github.com/hminghe/md-admin-element-plus/commit/be3cdf6999d3ae349f79e31d32b2a49de1239fcc

lvjiaxuan commented 2 years ago

我在用element-plus 开发也发现了这个问题，按需导入的新组件多就会卡死和刷新页面。最后的解决方案是开发用全量导入组件，打包用按需导入。可以参考一下我的修改 hminghe/md-admin-element-plus@be3cdf6

谢谢你，温暖了四季

hooray commented 2 years ago

~~我的做法是把 element plus 里会触发预构建的资源在运行一开始就手动进行预构建 https://github.com/hooray/fantastic-admin/blob/master/vite.config.js#L58-L60~~

我的方案在 element-plus@2.2.1 下无法使用，推荐使用 @hminghe 的方案。

我在用element-plus 开发也发现了这个问题，按需导入的新组件多就会卡死和刷新页面。最后的解决方案是开发用全量导入组件，打包用按需导入。可以参考一下我的修改 hminghe/md-admin-element-plus@be3cdf6

但需要注意的是，因为这个方案是在开发环境进行全局引入，打包构建后还是保留按需引入。所以在使用 message 这类组件时，不要使用全局引入时提供的 $message 方法，而是使用 import { ElMessage } from 'element-plus' 的方式。如果嫌麻烦则可以使用 unplugin-auto-import ，并且在 vite.config.js 里对这类反馈组件的样式进行预构建

        optimizeDeps: {
            include: [
                'element-plus/es',
                'element-plus/es/components/message/style/css',
                'element-plus/es/components/notification/style/css',
                'element-plus/es/components/message-box/style/css'
            ]
        },

总的来说还是挺蛋疼的，为了个自动按需引入，方案是绕来绕去，还是希望 vite 或者 unplugin-vue-components 能来解决掉这问题吧

llcat commented 2 years ago

😭 终于找到了相同的问题, 在vite issues区找了半天, 用element-plus也有, debug看vite:load一个小组件要40多秒, 经常卡死并导致页面刷新，开发体验好糟糕

llcat commented 2 years ago

我在用element-plus 开发也发现了这个问题，按需导入的新组件多就会卡死和刷新页面。最后的解决方案是开发用全量导入组件，打包用按需导入。可以参考一下我的修改 hminghe/md-admin-element-plus@be3cdf6

按照这种方式解决呢, 有大佬搞明白问题到底出在哪吗?

sxzz commented 2 years ago

Out of the scope of this plugin, please report it to the UI library repo.

shuqiang0 commented 1 year ago

推荐使用按需加载，然后用了之后，感觉还没有webpack好用🥲

unplugin / unplugin-vue-components

使用按需引入时，首次启动服务会依赖预构建style #361