未分類
6 11 月 2020

Vue 本地运行没事， Build 之后运行发生页面卡死问题，找了一天了，没有查到问题

Vue 本地运行没事， Build 之后运行发生页面卡死问题，找了一天了，没有查到问题

資深大佬 : Jmysy 8

演示地址： http://ant.pearadmin.com

源码位置: https://gitee.com/Jmysy/pear-admin-ant

本地运行没有问题，打包之后会有出现这个问题，也没有报错信息

大佬有話說 (33)

  • 資深大佬 : iMusic

    文件太大唠~

  • 資深大佬 : chairuosen

    应该是你的 Animation.js 的问题，动画结束了还在一直 requestAnimationFrame 无限调自己。切走了也没注销，再切回来又注册一遍估计就卡死了

  • 資深大佬 : TomVista

    我能正常进去啊,大兄弟,你是不是改好了[![DuBYf1.png]( https://s3.ax1x.com/2020/11/19/DuBYf1.png)]( https://imgchr.com/i/DuBYf1)

  • 資深大佬 : TomVista

    浏览器是 chrome 的 edge,排除下是不是 js 特性带来的

  • 主 資深大佬 : Jmysy

    @TomVista 能进去，但是切换菜单会有问题

  • 主 資深大佬 : Jmysy

    @chairuosen 本地为什么没有这个问题

  • 資深大佬 : chairuosen

    @Jmysy #6 没试

  • 資深大佬 : magicdu

    有没有递归的地方卡死了？

  • 主 資深大佬 : Jmysy

    @magicdu 本地没问题测不出来，线上没有错误信息，很难定位

  • 資深大佬 : gouflv

    Chrome devtool 录制调用栈，找最耗时的

  • 資深大佬 : mxT52CRuqR6o5

    js 死循环了，在死循环时在控制台里暂停代码能知道是哪里死循环的
    我这边看是一个 traverse 名字的函数，应该是依赖库里的代码，你从这个函数调用栈一层一层往上看有没有你的代码

  • 主 資深大佬 : Jmysy

    @mxT52CRuqR6o5 大佬可否给解决一下，可以请喝咖啡或有偿

  • 主 資深大佬 : Jmysy

    @mxT52CRuqR6o5 这是我 qq 854085467

  • 資深大佬 : xg4

    还有个问题
    vue-router 使用的 history 模式，但是 nginx 没有配置，刷新页面会请求 nginx 路由（ 404 ），而不是前端路由

  • 主 資深大佬 : Jmysy

    @xg4 这个地方因为测试特意改过

  • 資深大佬 : yaphets666

    runtime-core.esm-bundler.js:2106 [Deprecation] ‘window.webkitStorageInfo’ is deprecated. Please use ‘navigator.webkitTemporaryStorage’ or ‘navigator.webkitPersistentStorage’ instead.
    先把这个改了试试

  • 主 資深大佬 : Jmysy

    @yaphets666 这个具体是因为什么所产生的警告

  • 資深大佬 : yaphets666

    @Jmysy window.webkitStorageInfo 这个 API 被废弃了 你全局搜索他 谁引用了他就注释掉 看看还能不能跑起来 能跑起来那就再 build 一次试试

  • 資深大佬 : yaphets666

    我比较菜啊 上其他兄弟说的问题我都没发现 但是只要切菜单就报这个警告 我首先是怀疑这个问题 而且卡住之后浏览器连刷新都刷新不了 我感觉和浏览器 API 有关系

  • 主 資深大佬 : Jmysy

    @yaphets666 这应该是个依赖项，本项目中并没有使用该 API

  • 資深大佬 : yaphets666

    @Jmysy 你看 gitee 吧 有人给你提 pr 了 你 beforeEach 没调 next()

  • 主 資深大佬 : Jmysy

    @yaphets666 和此处关系不大， 合并测试过了

  • 主 資深大佬 : Jmysy

    就这么一筹莫展吗 …

  • 資深大佬 : SmallTeddy

    这个很明显就是死循环了 刚刚打开 没点什么呢 页面就挂掉了

  • 資深大佬 : yaphets666

    完了兄弟 traverse 这个函数是 vue3 的 apiWatch.ts 这个文件的 可能是 vue3 的 bug 吧

  • 資深大佬 : yaphets666

    https://github.com/vuejs/vue-next/issues/2380 看下这个 issue 说应该就你的这个问题

  • 資深大佬 : mxT52CRuqR6o5

    我这边看下来
    header/index.vue 第 190 行
    tab/index.vue 第 106 行
    menu/index.vue 第 81 行
    都注释掉，build 出来的页面切换路由就不会卡死了，看着像是 vue3 watch router 会有 bug

  • 資深大佬 : TomVista

    https://github.com/vuejs/vue-next/issues/2027
    https://github.com/vuejs/vue-router-next/blob/2e277ef51679f9c5f94388af1f37ecf9d2f24579/docs/guide/essentials/dynamic-matching.md#L44

  • 主 資深大佬 : Jmysy

    刚刚被禁言了，因为回复频繁，大家可以到源码地址讨论，也可能和 watch router 的使用方式有关系，但是官方提供了 useRoute() userRouter() 如果源码正确，这样使用是没有问题的，如果说是递归卡死，在本地开发测试的时候就应该体现出来了，不会等到 build 之后

  • 主 資深大佬 : Jmysy

    尝试使用 watch:{ $route: } 或 import router from “./router/index.js” 方式来替换现有的 useRoute() 与 useRouter() API

  • 主 資深大佬 : Jmysy

    @mxT52CRuqR6o5 接受了你的建议，屏蔽了代码的确如此，现在就是去切换路由的使用方式，看目前哪种方式当前版本适配，useRoute() import router watch:{ $route } 等方式

  • 資深大佬 : sampeng

    本地你是不是 localhost 这样去访问？如果是，换成域名…如果不是，看下一。一般 js 线上线下执行差异一般就是踩了浏览器在处理 localhost 和域名有不一样的逻辑…

  • 主 資深大佬 : Jmysy

    多谢各位的帮助，@mxT52CRuqR6o5 老哥点到了我，目前 watch ( route ) 的方式是有问题的，目前更正为 watch( route.fullpath ) 的方式