首先,需要理解Vue的动态路由懒加载和代码分割是如何工作的。Vue的动态路由懒加载主要是利用webpack的代码分割功能,将路由组件分割成不同的代码块,然后当路由被访问时才异步加载对应的代码块。这样可以实现按需加载,提高应用的启动速度和性能。
然而,你的描述中提到了一个问题,即当你进入任何一个动态路由页面时,会请求全部js。这可能是因为你的代码分割配置或者路由懒加载的配置存在一些问题。
首先,你需要确保你的路由懒加载配置是正确的。在Vue中,你可以使用动态导入(import()
)语法来实现路由的懒加载。例如:
const router = new VueRouter({
routes: [
{ path: '/home', component: () => import('@/views/Home.vue') },
{ path: '/about', component: () => import('@/views/About.vue') }
]
})
在这个例子中,Home.vue
和About.vue
组件会被分割成不同的代码块,并且只有在对应的路由被访问时才会被加载。
其次,你需要确保你的webpack配置是正确的。你需要确保你的webpack配置启用了代码分割,并且没有启用预加载(prefetch
)或者预获取(preload
)。你可以在你的webpack配置文件中查找optimization.splitChunks
选项,并确保它被正确配置。同时,你也需要确保optimization.prefetch
和optimization.preload
选项没有被启用。
如果以上两点都没有问题,那么问题可能出在你的第三方库上。如果你的第三方库被多个路由页面共享,那么它可能会被包含在一个公共的代码块中,从而导致它在任何一个路由页面被访问时都被加载。要解决这个问题,你可以尝试将引入这个第三方库的页面单独打包,将它和其他的动态页面分割开。你可以使用webpack的optimization.splitChunks
选项的cacheGroups
属性来实现这一点。
最后,如果你的项目使用了vue-cli,那么你也可以尝试使用vue-cli的vue inspect
命令来查看webpack的配置,以确保你的配置是正确的。
总的来说,你需要确保你的路由懒加载和代码分割配置是正确的,同时也需要确保你的第三方库没有被多个路由页面共享,或者如果它们被共享了,你需要将它们单独打包。
猜测是各种间接引用导致,打包工具认为,在这个页面里,就是要引入这个 JS 包。
解决方案有两点:
export * from './some-js'