javascript - 带有 webpack 的 Intl.js polyfill/shim？

Question

我正在使用 React-Intl与 webpack我需要 Intl shim 以支持 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 .