2016-05-26 35 views
5

Sto cercando di mantenere il mio codice (sever e lato client) il più modulare possibile e questo richiede un sacco di importazione ed esportazione, tuttavia ho una domanda senza risposta.ES6 duplicati di importazione?

Ho provato a cercare da qui, ho letto post sul blog di attualità e ho anche guardato alcuni video YT, ma non è ancora completamente spiegato. Mi piacerebbe evitare di fare questo errore adesso ed evitare di riscrivere la mia logica in seguito.


File1

import React from 'react'; 

// do something 

File2

import React from 'react'; 

// do something else 

File3

import File1 from './file1'; 
import File2 from './file2'; 

// do something with both 

  • È abbastanza intelligente? Posso importare lo stesso modulo quanto voglio e lo importa solo una volta?
  • Cosa succede se ho bisogno di import React a File3 troppo? È ancora abbastanza intelligente da gestire questa situazione?

Im utilizzando Node, Babel e Webpack.

risposta

8

Quando si importa un modulo tramite Node (e per estensione, Webpack, come effettivamente segue le stesse regole quando si tratta della risoluzione del modulo), il codice nel file viene eseguito una volta, quindi le esportazioni risultanti vengono memorizzate nella cache. Ciò significa che in entrambi i tuoi file, React sarà un riferimento allo stesso oggetto. Così efficacemente la tua ipotesi è corretta - Webpack è davvero abbastanza intelligente da non eseguire il file di codice sorgente completo di React ogni volta che lo si importa.

È possibile testare questo per te abbastanza facilmente - aggiungere un console.log() a un modulo che viene importato in più posizioni all'interno della vostra app (assicurandosi che non è in una funzione o qualsiasi altra cosa che differire la sua esecuzione). Vedrai che il log si verifica solo una volta, anziché una volta per importazione!

Problemi correlati