带有 webpack 的 Intl.js polyfill/shim?

Posted

技术标签:

【中文标题】带有 webpack 的 Intl.js polyfill/shim?【英文标题】:Intl.js polyfill/shim with webpack? 【发布时间】:2015-06-30 12:53:36 【问题描述】:

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

polyfill 非常大(900kb),我如何确保它只在不支持它的浏览器中加载?

【问题讨论】:

【参考方案1】:

您需要做一些事情。

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

    仅在需要时使用 webpack 的 require.ensurerequire([]) 函数动态地请求 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 上的部分。

【讨论】:

【参考方案2】:

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

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

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

【讨论】:

以上是关于带有 webpack 的 Intl.js polyfill/shim?的主要内容,如果未能解决你的问题,请参考以下文章

javascript INTL-dates.js

javascript INTL-number.js

带有 prod 参数的 webpack

带有延迟加载问题的 webpack 树抖动

带有 requirejs/AMD 的 Webpack

使用带有 Rails 引擎的 webpacker