Intl.js polyfill/shim with webpack？

Question

我正在使用React-Intl和webpack,我需要Intl shim来支持Safari和IE,但我不想为已经支持Intl规范的浏览器加载它.

polyfill非常庞大(900kb),我怎样才能确保它只在已经不支持它的浏览器中加载？

Answer 1

您需要做一些事情.

1. 确保要求intl/Intl加载核心库而不是所有相关国家.这将把库的大小从大约900kb减少到大约150kb.

2. 使用webpack require.ensure或require([])函数仅在需要时动态地要求Intl.js.这将为Intl.js文件创建一个单独的包,该文件将根据需要加载.

LIB/shim.js

// shim for Intl needs to be loaded dynamically
// so we callback when we're done to represent
// some kind of "shimReady" event
module.exports = function(callback) {
    if (!window.Intl) {
        require(['intl/Intl'], function(Intl) {
            window.Intl = Intl;
            callback();
        });
    } else {
        setTimeout(callback, 0); // force async
    }
};

app.js

var shimReady = require('lib/shim');
shimReady(startApp);

注意:您可能还需要访问特定国家/地区的信息和属性.对于我的基本需求,我实际上并不需要这些数据,但如果你确实阅读了Intl.js网站加载语言环境数据的部分.

Answer 2

一个简单的(非webpack)方法是在HTML中做这样的事情:

<script>
 if (!window.Intl) { document.write('<script src="/js/Intl.min.js"><\/script>'); }
</script>

虽然document.write不被认为是最佳实践,但这将提供一种阻止解决问题的方法,从而导致应用程序中的代码少得多.该解决方案不使用webpack,但对于这种情况下的许多人来说可能是合适的解决方案.