Unexpected token < [duplicate] webpack打包发布新版本加载新js抛错

  1. 问题描述,报错 app.6fbc22d5.js:1 Uncaught (in promise) ChunkLoadError: Loading chunk 14 failed

  2. Unexpected token < [duplicate]   webpack打包发布新版本加载新js抛错

  3. 是由于webpack拆分包,打包出来js是带有hash值得。如果用户已经登录,本地已经知道,需要按需加载的js路径地址。但此时服务重新发版,会导致打包出来的hash值会有变化。用户使用旧的资源去请求。导致加载不到资源,服务器会返回登陆的html。

  4. 导致页面点击没反应抛错。

    1. SyntaxError, 此类异常一旦发生,导致整个js文件都无法执行,所以点击页面没反应

  5. 解决方案

    1. 减少发版次数

    2. 减少缓存,或者token失效时间。

    3. webpack 打包的时候,增加js?id=[hash]

      1. 解决加载不到,抛错。

      2. 但是不会加载最新资源,需要用户手动刷新,就好了

    4. 捕获异常,重新加载页面(终极解决方案)

      1. 直接上代码

      2. Unexpected token < [duplicate]   webpack打包发布新版本加载新js抛错

      3. 因为是vue项目,点击新页面会根据页面加载相应的拆分js,所以js抛错,也会传导到router里。

      4. 所以没有自定义监听错误处理错误

      5. 如果发生此类错误,直接执行reload。刷新页面,获取最新的js。

      6. 这样既不阻塞页面,又不让用户有多余的操作,或者刷新,就可以自动获取最新代码。nice

上一篇:net.sf.jsqlparser.parser.ParseException: Encountered unexpected token: "(" "("


下一篇:在HBuilder中如何修改项目为JavaScript版本ES6,“Uncaught SyntaxError: Unexpected identifier“解决办法