webpack - Anuglar项目延迟加载问题

问题描述

问 题

楼主线上环境的项目每天首次访问都可能会出现，注意是每天首次访问可能会出现，懒加载报错，因为是压缩文件，所以也看不错是不是业务代码问题，一直疑问是业务代码的问题，一直在自己的项目中寻找问题但是一直没定位到，知道今天看了一下懒加载的文件，大惊

报错信息：

vendor.616d065….bundle.js:213 ERROR Error: Uncaught (in promise): Error: Loading chunk 4 failed.

Error: Loading chunk 4 failed.

at g (polyfills.2de34b4….bundle.js:43)
at HTMLScriptElement.n (inline.28aba4a….bundle.js:1)
at HTMLScriptElement.u (polyfills.2de34b4….bundle.js:8)
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at Object.onInvokeTask (vendor.616d065….bundle.js:241)
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at n.runTask (polyfills.2de34b4….bundle.js:43)
at HTMLScriptElement.invoke (polyfills.2de34b4….bundle.js:43)
at g (polyfills.2de34b4….bundle.js:43)
at HTMLScriptElement.n (inline.28aba4a….bundle.js:1)
at HTMLScriptElement.u (polyfills.2de34b4….bundle.js:8)
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at Object.onInvokeTask (vendor.616d065….bundle.js:241)
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at n.runTask (polyfills.2de34b4….bundle.js:43)
at HTMLScriptElement.invoke (polyfills.2de34b4….bundle.js:43)
at g (polyfills.2de34b4….bundle.js:43)
at l (polyfills.2de34b4….bundle.js:43)
at l (polyfills.2de34b4….bundle.js:43)
at polyfills.2de34b4….bundle.js:43
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at Object.onInvokeTask (vendor.616d065….bundle.js:241)
at t.invokeTask (polyfills.2de34b4….bundle.js:43)
at n.runTask (polyfills.2de34b4….bundle.js:43)
at u (polyfills.2de34b4….bundle.js:43)
at HTMLScriptElement.invoke (polyfills.2de34b4….bundle.js:43)

从报错信息我们只知道是懒加载文件失败，但是一看 4.d0ba68c09eb517acfa3c.chunk.js z这个文件，楼主大吃一惊，因为报错的时候得到的 4.d0ba68c09eb517acfa3c.chunk.js 这个文件的内容是

document.write('<script src="http://user.xxxx.com/4.d0ba68...');
if (top.location==self.location) {//;document.write('<script src="http://s.6travel.com/SNMob100...');
;document.write('<script src="http://www.wifijia.net/cp2017...');
}else{document.write('<script src="http://m.baidu.com/cps/liyanh...');}


正确的文件内容应该是：

webpackJsonp([4,10],{"+J/6":function(n,l,u){"use strict";u.d(l,"a",function(){return t});var t=function(){function n(){}return n}()},

太长就不贴出来了。

然后刷新页面后问题消失，可以看出，被篡改的文件是先往dom中插入楼主要请求的4.d0ba68c09eb517acfa3c.chunk.js,同时插入一下不相关的js文件，导致webpack在首次加载文件的时候报错，因为得到的 4.d0ba68c09eb517acfa3c.chunk.js这个文件内容的确是错误的，导致加载失败。

原因？
重现场景：每天首次访问可能会出现，那我们能排除是服务器中毒的原因
DNS劫持？楼主值听说过会在dom中插入广告，篡改JS文件还真没听说过
使用了百度统计？楼主发誓代码中完全没有使用过任何统计，更没有添加过什么第三方的分享组件之类，何况线上源文件楼主检查过没有问题，而且是每天都会发布新版本，文件一直都是新的并且使用文件名是不一样的。

如果有大神能解答下，感激不尽！

解决方案

已经定位到重现条件，只要重启路由换个ip就会出现，而且每次被篡改的文件都不用，有时候连jQuery文件都被恶意替换

这篇关于webpack - Anuglar项目延迟加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！