小虾虎鱼

小虾虎鱼

在webpack中使用UglifyJsPlugin压缩js后在IE8中存在问题

作者 禾惠 发表于 2017/01/08 18:15 ,最后修改于 2017/01/08 18:23

使用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进行压缩。

如果问题的根本解决方法找到再补充。

我欣赏你的好品味~

打开支付宝扫一扫