0

Lately I've been having issues with Webpack5 chunks and caching, I guess. The thing is after a deploy, the changed chunks sometimes change their Id, but the app still tries to fetch the chunk with its old Id, the Network tab says it requests for: "[id].undefined.js"

As said in the title, the id that appears in the network tab it's nowhere to be found in the chunk list from the runtimeChunk file. (it was in the old one)

Can't figure out what could this be :( Tried reverting the commit in local, building the app and entering the web, then reapplying the commit and building the web again, when refreshing the web it fetches the new Id, not the old one. The only difference (AFAIK) between my test and production is that mine is an ExpressJS server and production is nginx.

I guess my question is, how do I stop webpack from trying to load a chunk that it nolonger exists in the runtimeChunk

We have index.html and the runtimeChunk in NGinx/Express with:

  • Expires: -1
  • Pragma: no-cache
  • Cache-control: no-store, must-revalidate

This would be the webpack config

{
    cache: false,
    plugins:  [
      new CompressionPlugin({
        threshold: 0,
        minRatio: Number.MAX_SAFE_INTEGER,
        filename: '[file].gz'
      })
    ],
    output: {
      filename: 'js/[name].js',
      publicPath: '/',
      chunkFilename: 'js/[name].[chunkhash].js',
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        name: false
      },
      runtimeChunk: {
        name: 'manifest',
      },
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            minify: true,
            sourceMap: false,
            compress: {
              drop_console: false,
            },
            output: {
              comments: false,
              beautify: false,
            },
          },
        }),
      ],
    },
    performance: {
      hints: false,
    }
}
Gmee
  • 61
  • 1
  • 5
  • While I don't find an actual fix for this I've decided to make big ass named chunks for each "module" of in-house code, this way I should be able to still have somewhat small split code chunks and not make the user download the modules they don't need and still not fall victim for this messed up old chunk loading – Gmee Feb 19 '23 at 11:27

0 Answers0