Intl.js polyfill/shim 使用 webpack?
Intl.js polyfill/shim with webpack?
我正在使用 React-Intl with webpack and I need the Intl shim to support Safari and IE, but I don't want to load it for browsers that already support the Intl spec。
polyfill 非常大 (900kb),我如何确保它只在不支持它的浏览器中加载?
您需要做一些事情。
确保要求 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.
上的部分
一个简单的(非 webpack)方法是在你的 HTML:
中做这样的事情
<script>
if (!window.Intl) { document.write('<script src="/js/Intl.min.js"><\/script>'); }
</script>
虽然 document.write
不被认为是最佳实践,但这将提供一种解决问题的阻塞方法,从而大大减少应用程序中的代码。此方案不使用 webpack,但可能是适用于很多人这种情况的方案。
我正在使用 React-Intl with webpack and I need the Intl shim to support Safari and IE, but I don't want to load it for browsers that already support the Intl spec。
polyfill 非常大 (900kb),我如何确保它只在不支持它的浏览器中加载?
您需要做一些事情。
确保要求
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.
上的部分一个简单的(非 webpack)方法是在你的 HTML:
中做这样的事情<script>
if (!window.Intl) { document.write('<script src="/js/Intl.min.js"><\/script>'); }
</script>
虽然 document.write
不被认为是最佳实践,但这将提供一种解决问题的阻塞方法,从而大大减少应用程序中的代码。此方案不使用 webpack,但可能是适用于很多人这种情况的方案。