2

I have combined two files file1.js and file2.js into single chunk using the following configuration:

optimization: {
    splitChunks: {
        cacheGroups: {
           test(module) {
               return (module.resource.includes('file1') || module.resource.includes('file2'));
           },
           chunks: 'All',
           name: 'test'
        }
    }
}

when I run two dynamic imports, I can see only 1 request is sent to the server for test.js which is the chunk created by web pack.

import('file1').then(doSomething);
import('file2').then(doAnotherThing);

My question is if my chunk file is large and my first import hasn't been resolved yet, is there a possibility that my second import will re-fetch the same bundle again? Since the two promises are different, they can resolve in any order, therefore is it possible that I can see two network requests for the same chunk?

This may be a stupid question, but I am having a hard time to get a confirmation on this.

Sachin Singh
  • 898
  • 1
  • 8
  • 17
  • 1
    Doesn't matter whether the chunk is large or not, the promise will never resolve before both `import()` statements are evaluated. If you are not seeing two network requests now, you probably never will. The bundle request should be cached, no matter how many imports want to use it there should be only a single network request. – Bergi Jan 20 '19 at 15:19
  • @Bergi Thank you for confirming that – Sachin Singh Jan 20 '19 at 18:31
  • Notice I just said "probably" and "should", this is just an educated guess not a confirmation of webpacks designed behaviour. – Bergi Jan 20 '19 at 18:45

0 Answers0