Web show blank white page until clear Cache storage

[truonglocbinh]

I am using vue 3 and amplify AWS for deploy my vue 3 project. I had a problem that everytime I deploy new code, my web site often show blank page. If page want to show, I need clear Cache storage or wait some minutes. That's make my customer feel bad for my site. This is my config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['ion-icon'].includes(tag),
        }
      }
    }),
    VitePWA({
      base: '/',
      includeAssets: ['img/**/*.*', 'fonts/**/*.*'],
      useCredentials: true,
      registerType: 'autoUpdate',
      manifest: {
        name: 'App',
        short_name: 'My App',
        start_url: '/',
        display: 'standalone',
        background_color: '#fff',
        theme_color: '#fff'
      }
    })
  ],
  server: {
    port: 5000,
    host: '0.0.0.0',
    hmr: {
      host: 'localhost',
      port: 5000
    }
  },
  build: {
    chunkSizeWarningLimit: 100,
    manifest: true
  },
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    }
  }
})

[userquin]

Review your cache headers, index.html should use 200, any entry inside assets folder can use immutable, check deploy docs for other deployments (AWS is missing, I dont use it)

[BrianHung]

I would also double check if you encounter maximumFileSizeToCacheInBytes, as that would prevent vendor.js from being properly cached.