ダイナミックimportでコードを分割して問題をパブリッシュ

SPA(単一ページアプリケーション)を使用する場合、パフォーマンスを向上させるために importを使用してコードを分割することがよくあります.この場合、パブリッシュされると、このような問題が発生する可能性があります.
ユーザがパブリケーション前にアプリケーションにアクセスし、パブリケーション後にスライスコードを導入するインタフェースにアクセスすると、ページ静的リソースのパスが古い可能性が高い.サーバが新しくパブリッシュしたリソースパスが新しい(ほとんどのパスが異なるのはファイル名のhash値が異なるためであり、ここでもこのような場合と仮定する)場合、2つのパスが異なり、404の発生を招く.
ここでは簡単な処理方法について説明します.

HTML非キャッシュ

を設定する.

動的に導入されたJSにhash値を加えると、この文章

を読むことができます.

//  import   
import(/* webpackChunkName: "[request]" */`../../containers/${requestPath}`)

//webpack.config.js
//...     
output: {
    //...     
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].js',//    hash,       hash          
},
//...     

キャッシュヘッダ情報

を設定.

//       koa2                           
app.use(require('koa-static')(__dirname + '/public',{
    maxage:1209600000//               
}))

上記の手順により、ユーザがパブリッシュ後にスライスコードを導入するインタフェースに入ると、ページ内の参照は古いリソースパスであり、ページにキャッシュがあるためエラーは報告されません.ユーザが新たにページにアクセスすると(例えばリフレッシュする)、HTMLファイルはキャッシュされないため、導入されたjsも新しいパスであり、スライスパスも新しいので、インタフェースはエラーを報告しない.
ここで注意しなければならないのは、サービス側が新しく発表したコードが古いインタフェースと互換性があることです.例えば、古いインタフェースが間違っているなどです.