Question

我正在React-Intl使用webpack我需要Intl垫片来支持Safari和IE，但我不想为浏览器加载它已经支持Intl spec。

polyfill相当庞大（900kb），我怎样才能确保它只在已经不支持它的浏览器中加载？

Answer 1

您需要做一些事情。

确保要求intl/Intl加载核心库，而不是所有关联国家/地区。这会将库的大小从大约900kb减少到大约150kb。
使用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网站loading locale data上的部分。

Answer 2

一种简单的（非webpack）方法是在HTML中执行类似的操作：

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

尽管document.write不被视为最佳做法，但这会提供一种阻止解决问题的方法，从而导致应用程序中的代码大大减少。此解决方案不使用webpack，但对于这种情况下的许多人来说可能是一个合适的解决方案。

Intl.js polyfill / shim with webpack？

2 个答案: