2015-04-22 26 views

risposta

11

Ci sono alcune cose che dovete fare.

  1. Assicurarsi di richiedere intl/Intl che carica la libreria principale e non tutti i paesi associati. Ciò ridurrà la dimensione della libreria da circa 900kb a circa 150kb.

  2. Utilizzare le funzioni require.ensure del webpack o require([]) per richiedere in modo dinamico Intl.js solo quando necessario. Questo creerà un pacchetto separato per il solo file Intl.js, che verrà caricato in base alle necessità.

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

Nota: Èpotrebbe anche bisogno di accedere alle informazioni specifiche del paese e proprietà. Per le mie esigenze di base che in realtà non richiedono questi dati, ma se lo fate assicuratevi di leggere la sezione sul sito Intl.js loading locale data.

6

Un approccio semplice (non webpack) sarebbe quello di fare qualcosa di simile nel codice HTML:

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

Anche se document.write non è considerato una best practice, ciò fornirebbe un approccio di blocco per risolvere il problema, con conseguente molto meno codice nella tua applicazione. Questa soluzione non utilizza il webpack, ma potrebbe essere una soluzione adatta a molte persone in questa situazione.

Problemi correlati