Webpack puts lazy-loaded module into main chunk #18386
AlexanderSlesarenko
started this conversation in
General
Replies: 1 comment 1 reply
-
You can setup this using https://webpack.js.org/plugins/split-chunks-plugin/ |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have two components.
One of them is imported directly:
import { directComp } from "./components";
another one is imported lazy:
const lazyComp = import("./lazyProxy");
lazyProxy.js:
components/index.js:
When i bundle it, webpack puts both lazyComp and directComp into main chunk. Which is not what i expected. I wanted lazy-loaded component to be in a separate chunk.
If i change components/index.js:
Then webpack works as expected: directly imported directComp resides in main chunk. Lazy loaded lazyComp - in a separate chunk.
I would like to achieve the same result (directComp - in main, lazyComp - in a separate chunk) when all the code of these components is located inside one file, i.e.:
Here is a link to the sample repo:
https://github.com/AlexanderSlesarenko/sample
Beta Was this translation helpful? Give feedback.
All reactions