Vue3 + Vite中import.meta.glob如何避免非页面组件单独打包?

vue3 + vite 加载动态路由 使用 const modules = import.meta.glob('../views/**/*.vue')会导致 views 页面下的组件也单独打包吗?因为views目录下不可能只放页面,还会放一些页面拆分出来的组件,如果vite分析打包的时候把每个组件都单独打包,网络请求会太多.

之所以有这个疑问是因为:我打包后发现views下有的组件被单独打包了,有的被打包进了单的的chunk,并且打包有提示
[plugin:vite:reporter] [plugin vite:reporter]
(!) D:/1WorkProject/cssmx/bigScreen/src/views/login/Verifition/Verify.vue is dynamically imported by D:/1WorkProject/cssmx/bigScreen/src/store/user.ts but also statically imported by D:/1WorkProject/cssmx/bigScreen/src/views/login/Login.vue?vue&type=script&setup=true&lang.ts, dynamic import will not move module into another chunk. ,
意思应该是说同时被src/store/user.ts里的import.meta.glob('../views/**/*.vue')动态引入和Login.vue静态引用了(Login.vue页面不是动态路由是静态路由),因此被移到另一个chunk,打包结果里也没有找到Verify.vueLogin.vue的js文件,应该是于其他静态组件打包到一起了。然后我发现动态页面 静态引入 的组件并没有这个提示,打包结果里也有他们的组件名的js打包文件,就是被单独打包成一个文件了。还有就是element的一些组件也被单独打包了,比如什么el-table-column.js,应该是我使用了unplugin-vue-components插件的原因。说了这么多就是想问一下vite的默认打包逻辑需要手动修改吗,如果自己改应该是要去看rollup文档,但是应该根据什么逻辑来设计打包呢?

阅读 823
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏