problema di memorizzazione nella cache con l'applicazione Web sviluppata utilizzando reactjs & webpack

Sto lavorando a un'applicazione Web sviluppata utilizzando reactjs e webpack. Dopo ogni distribuzione, dobbiamo chiedere agli utenti di svuotare la cache del browser e riavviare i loro browser. Penso che il file bundle javascript e il file css vengano entrambi memorizzati nella cache del browser dell'utente.problema di memorizzazione nella cache con l'applicazione Web sviluppata utilizzando reactjs & webpack

Come è possibile imporre al browser di non memorizzare nella cache questi file o di scaricare i file più recenti dal server.

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My App</title> 
      <link rel="stylesheet" href="styles.css" media="screen" charset="utf-8"> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

fonte

2016-04-07 OpenStack

È possibile utilizzare html-webpack-plugin

plugins: [ 
    new HtmlWebpackPlugin({ 
     hash: true 
    }) 
]

hash: true | false if true quindi aggiungi un hash di compilazione Webpack univoco a tutti gli script e file css inclusi. Questo è utile per il busting della cache.

fonte

2016-04-07 16:07:54 Jack

Grazie per la risposta rapida. Ricevo l'errore seguente 'Impossibile caricare la risorsa: il server ha risposto con uno stato di 404 (Non trovato)' per il file 'bundle.js? 1c03629db68f03ac936e' e un errore simile è in arrivo per il file' styles.css? 1c03629db68f03ac936e'. Ho installato il pacchetto npm e aggiunto semplicemente il codice mostrato da voi nel file di configurazione di webapck. dopo la costruzione e la distribuzione sto ricevendo un errore. quando eseguo l'applicazione localmente ottengo il seguente errore 'ncaught Violazione invariante: _registerComponent (...): Il contenitore di destinazione non è un elemento DOM. – OpenStack

Assicurarsi che il file html generato da' HtmlWebpackPlugin' stia facendo riferimento ai file correttamente. Non so come sia impostato il progetto in modo che possa pensare che la struttura della directory di distribuzione sia diversa da quella che è. – Jack

Penso che il problema è, la stringa di query non è nel formato corretto. invece della coppia di valori chiave, il file è solo un valore. con ciò intendo invece di 'bundle.js? v = 1c03629db68f03ac936e' il suo arrivo come' bundle.js? 1c03629db68f03ac936e'. manca il 'key'. Ho perso un'opzione di configurazione. – OpenStack

Esiste un modo semplice per evitare questo problema senza ulteriori elementi. Usa la capacità di hash incorporata nel webpack.

È possibile leggere l'aggiunta di hash al pacchetto here. Mentre il titolo di questo è "Cache a lungo termine" è vero solo nel caso in cui i tuoi file non cambiano. Ma se ricostruisci il tuo bundle ottieni un nuovo hash unico, quindi il browser potrebbe pensare che sia un nuovo file e scaricarlo.

fonte

2016-04-07 17:17:55 gyzerok

assumendo che io stia usando 'filename: '[hash] .bundle.js',' nel mio file webpack.config. che genera un file come questo '3d161aa1fedaca1ca95b.bundle'. Ora come faccio ad aggiornare il mio file index.html che include ancora il file bundle.js come ''. L'articolo dice anche 'Si noti che è necessario fare riferimento al pezzo di entrata con il suo hash nel codice HTML. Potresti voler estrarre l'hash o il nome file dalle stat. 'Mi manca qualcosa qui? – OpenStack

Puoi trovare una risposta a questo nell'ultimo capitolo https://webpack.github.io/docs/long-term-caching.html#get-filenames-from-stats. Dopo la build puoi guardare in stats.json per vedere il nome effettivo del bundle e poi passarlo al modello html. – gyzerok

Grazie per la risposta. Ho visto il 'assets-webpack-plugin', dicono' Questo plug-in genera un file json con i percorsi delle risorse generate in modo da poterle trovare da qualche altra parte. Ma non vedo un esempio che spieghi come stanno aggiornando il nome del file di riferimento in 'index.html' – OpenStack

problema di memorizzazione nella cache con l'applicazione Web sviluppata utilizzando reactjs & webpack

risposta

Problemi correlati