Intl.js Polyfill/Shim mit Webpack?

Question

Ich benutze React-Intl mit webpack und ich brauche die Intl Shim Safari und IE zu unterstützen, aber ich möchte es nicht für Browser laden, die bereits die Intl spec unterstützen.

Das Polyfill ist ziemlich groß (900kb), wie kann ich sicherstellen, dass es nur in Browsern geladen wird, die es nicht bereits unterstützen?

Answer 1

Es gibt ein paar Dinge, die Sie tun müssen.

1. Stellen Sie sicher, dass intl/Intl erforderlich ist, das die Core-Bibliothek und nicht alle zugehörigen Länder lädt. Dies wird die Größe der Bibliothek von etwa 900 kB auf etwa 150 kB reduzieren.

2. Verwenden Sie die Funktionen require.ensure oder require([]) von webpack, um Intl.js nur bei Bedarf dynamisch zu benötigen. Dadurch wird ein separates Paket nur für die Datei Intl.js erstellt, die bei Bedarf geladen wird.

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); 

Hinweis: Sie kann auch Zugang zu länderspezifischen Informationen benötigen und Eigenschaften. Für meine Grundbedürfnisse habe ich diese Daten nicht wirklich benötigt, aber wenn Sie sicher sind, lesen Sie den Abschnitt auf Intl.js Website loading locale data.

Answer 2

Ein einfacher (nicht webpack) Ansatz so etwas wie dies wäre in Ihrem HTML zu tun:

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

Obwohl document.write nicht eine beste Praxis betrachtet wird, das einen blockierende Ansatz zur Lösung des Problems bieten würde, was zu erheblich weniger Code in Ihrer Anwendung führt. Diese Lösung verwendet kein Webpack, kann aber für viele Personen in dieser Situation eine geeignete Lösung sein.