前端 - vue动态路由懒加载会请求没有使用到的js文件？

Question

vue项目使用动态路由，路由也是懒加载，代码分割也做了。首页是静态路由，当我进入首页时没有请求项目所需的全部js，但是当我进入其中一个动态页面时，会把整个项目使用的js请求下来。例如只有其中一个页面用到的第三方库，代码分割后这个库有1M大小，但是这个页面也不经常点击，所以点击其他页面就没必要去请求这个第三方库。

做的测试：进入首页（静态路由），不去请求全部js，第一次进入任何一个动态路由页面，就会请求全部js。看了dist打包文件里有第三方文件的script标签，由于配置了config.plugins.delete('prefetch')，所以script上也没有prefetch。然后我把引入了第三方路由的页面变成了静态路由加载，这时候再点击其他动态路由就不会去请求那个第三方库了。

所以我不明白为什么动态路由懒加载会去请求第三方库，我猜测是不是需要把引入这个第三方库的页面单独打包，把它和其他的动态页面分割开？亦或者是我配置的路由懒加载没有生效？

第三方库例如：；包括echarts也是，进入的页面没有用到，但是也加载了。

Answer 1

首先，需要理解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的配置，以确保你的配置是正确的。

总的来说，你需要确保你的路由懒加载和代码分割配置是正确的，同时也需要确保你的第三方库没有被多个路由页面共享，或者如果它们被共享了，你需要将它们单独打包。