在webpack中使用UglifyJsPlugin压缩js后在IE8中存在问题
使用webpack打包js,并使用UglifyJsPlugin
插件进行压缩js代码,用起来确实很方便。然而代码都打包压缩好后,放到ie8中测试页面功能不正常,打开控制台没发现有js报错,IE9中测试时OK的。取消uglify压缩代码在IE8中再测试是正常的,因此基本上可以确定问题是出在uglify压缩这里。
虽然知道了问题的所在,但找出问题并非易事。所以我直接将webpack升到2.0版本进行打包压缩,问题还是没解决(后来从GitHub上了解到webpack2.0不支持ie8,醉了,又降回了1.x版本)。
最后根据功能的不正常一步一步排查问题,初看压缩后的代码,可能跟我的写法相关,因为看到压缩后的变量有被覆盖,所以尝试修改代码的写法,最后还是解决了。
下面分享一下出问题的代码例子:
function test() {
function display(text, next) {
document.getElementById("test").innerHTML = text;
next();
}
function walk(next) {
display(new Date(), next);
}
(function selfcall() {
setTimeout(function () {
walk(selfcall);
}, 1000);
})();
}
test();
!function (n) {
function t(o) {
if (e[o])
return e[o].exports;
var r = e[o] = {
exports: {},
id: o,
loaded: !1
};
return n[o].call(r.exports, r, r.exports, t),
r.loaded = !0,
r.exports
}
var e = {};
return t.m = n,
t.c = e,
t.p = "",
t(0)
}
([function (n, t) {
function e() {
function n(n, t) {
document.getElementById("test").innerHTML = n,
t()
}
function t(t) {
n(new Date, t)
}
!function n() {
setTimeout(function () {
t(n)
}, 1e3)
}
()
}
e()
}
]);
从压缩的代码中,我个人觉得就是因为方法n
的多次定义导致的。从所有压缩代码后出问题的代码中我发现:都是函数自调用并立即执行的写法出的问题。将上面的部分代码改成下面这样就可以了:
function selfcall() {
setTimeout(function () {
walk(selfcall);
}, 1000);
}
selfcall();
问题虽然解决了,但心依旧不踏实,因为我只发现这一种情况导致的问题,可能还会有其他情况。于是特意去看了一下UglifyJS2的使用文档,发现UglifyJS2是有对ie8做兼容处理的,只需要加上--support-ie8
参数就可以。于是我安装了UglifyJS2直接对代码进行压缩(带上了--support-ie8
参数),在ie8测试了一下是正常的。那要彻底解决问题此问题是不是只需要在UglifyJsPlugin插件的配置中添加--support-ie8
参数?找了webpack的API并没有相关介绍,在GitHub上也看到有人提供这样的问题#3614 。最后还是没有找到配置--support-ie8
的方法。不过可以尝试在外部调用使用UglifyJS2对webpack打包后的js进行压缩。
如果问题的根本解决方法找到再补充。