'webpack code splitting on dynamic require and dynamic import
I recently worked on my project to do code splitting on language packs. They were packed into the same major shared chunk when using dynamic require(): (like the following, I only pasted a simplified piece to show the syntax)
switch (lang) {
case 'it':
return require('./langs/it_IT.json');
case 'ja':
return require('./langs/ja_JP.json');
case 'ko':
return require('./langs/ko_KR.json');
default:
return require('./langs/en_US.json');
}
This is unexpected for me. I thought dynamic imported pieces would be split into individual chunks. Not until I rewrote the above piece using import(), these language packs were split from the main chunk.
switch (lang) {
case 'it':
return import('./langs/it_IT.json');
case 'ja':
return import('./langs/ja_JP.json');
case 'ko':
return import('./langs/ko_KR.json');
default:
return import('./langs/en_US.json');
}
I've done some research on the difference between require and import, but I didn't find the answer to why webpack didn't code split on dynamic required modules. Can anyone explain the difference between these two methods?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
