Dynamic imports with a dynamic expression are not chunked/loaded correctly
gliptic opened this issue · 1 comments
Dynamic imports with a dynamic expression (e.g. import(/* webpackMode: "lazy" */ `./${name}`)) are not chunked and/or loaded correctly when called from a TypeScript file, even if explicitly using the 'lazy' mode.
They work correctly when done from a JavaScript file leading me to think the bug is in ts-loader.
Example repo at the bottom.
Expected Behaviour
A chunk should be built for every separate .ts file; a.ts, b.ts and c.ts. Calling import should only load the chunk associated with that .ts file.
This works when the dynamic import is done from a .js file.
Actual Behaviour
a.ts, b.ts and c.ts are put together in the same chunk. In our actual application, they are put in separate chunks (because of the sizes?), but all of them are loaded at the same time when the dynamic import is done instead of only the chunk for the requested module, resulting in hundreds of requests.
Steps to Reproduce the Problem
Run npm install && npm run build in the linked repo. You can see that only one file called Content_sync_recursive_.js is created in the build folder instead of three separate ones.
Location of a Minimal Repository that Demonstrates the Issue.
have you tried setting tsconfig module to esnext?
https://stackoverflow.com/questions/49410022/webpack-lazy-loading-with-typescript