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.vue
和Login.vue
的js文件,应该是于其他静态组件打包到一起了。然后我发现动态页面
静态引入 的组件并没有这个提示,打包结果里也有他们的组件名的js打包文件,就是被单独打包成一个文件了。还有就是element的一些组件也被单独打包了,比如什么el-table-column.js
,应该是我使用了unplugin-vue-components
插件的原因。说了这么多就是想问一下vite
的默认打包逻辑需要手动修改吗,如果自己改应该是要去看rollup
文档,但是应该根据什么逻辑来设计打包呢?