TypeStrong / TypeStrong/ts-loader
Dynamic imports with a dynamic expression are not chunked/loaded correctly
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.5k
- Forks
- 439
- Avg merge
- 17h 17m
- Merged PRs (30d)
- 2
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal repository and run npm install && npm run build, then inspect the build folder and compare the TypeScript and JavaScript dynamic-import cases. Done means separate chunks are produced for a.ts, b.ts, and c.ts, and calling an import loads only the requested module's chunk.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100