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

作者站长头像
站长
· 阅读数 50

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

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

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

第三方库例如:vue动态路由懒加载会请求没有使用到的js文件?;包括echarts也是,进入的页面没有用到,但是也加载了。

回复
1个回答
avatar
test
2024-07-22

猜测是各种间接引用导致,打包工具认为,在这个页面里,就是要引入这个 JS 包。

解决方案有两点:

  1. 不要用任何入口文件,即一个 index.js 里全是 export * from './some-js'
  2. 只引用必要的依赖;尽可能把依赖拆分的细一点
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容