Intl.js polyfill/shim with webpack？

Question

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

这个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网站loading locale data的部分。

Answer 2

一个简单的（非的WebPack）的方法是做这样的事情在你的HTML：

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

虽然document.write不被认为是最好的做法，这将提供一个阻止的方法来解决这个问题，导致您的应用程序中的代码少得多。该解决方案不使用webpack，但可能适合这种情况下的许多人使用。