You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Using ModuleFederationPlugin, I understand that when you specify a dependency to be shared then webpack will automatically split that out into its own chunk. When it does that, by default it gives it a pretty ugly name like 1049.5b8f2f276b12bc0ddf9c.js.
This makes it hard to glean what the chunk even is (via the network tab within devtools). Furthermore, it can make it difficult to prove that module sharing is working as you'd expect. Are we loading more than one version of Vue on the page? Are the opportunities for better sharing on our page? Are we loading code that we shouldn't? etc.
It'd be amazing if there was a way to name the chunks generated from the shared config. For example:
import { createApp } from "vue";
Generates a chunk like vue_3_2_26.[hash].js
import { SomeButton } from "design-system/lib/components/some-button"
Generates a chunk like design-system_1_2_3_some-button.[hash].js
I messed around awhile with the chunkFilename config to try and accomplish this, but am quickly exceeding my Webpack expertise. Was wondering if anyone has been able to solve something like this? Feels like it could be a real game-changer to gain this additional observability.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Using
ModuleFederationPlugin
, I understand that when you specify a dependency to beshared
then webpack will automatically split that out into its own chunk. When it does that, by default it gives it a pretty ugly name like1049.5b8f2f276b12bc0ddf9c.js
.This makes it hard to glean what the chunk even is (via the network tab within devtools). Furthermore, it can make it difficult to prove that module sharing is working as you'd expect. Are we loading more than one version of Vue on the page? Are the opportunities for better sharing on our page? Are we loading code that we shouldn't? etc.
It'd be amazing if there was a way to name the chunks generated from the
shared
config. For example:import { createApp } from "vue";
vue_3_2_26.[hash].js
import { SomeButton } from "design-system/lib/components/some-button"
design-system_1_2_3_some-button.[hash].js
I messed around awhile with the chunkFilename config to try and accomplish this, but am quickly exceeding my Webpack expertise. Was wondering if anyone has been able to solve something like this? Feels like it could be a real game-changer to gain this additional observability.
Thanks!
Beta Was this translation helpful? Give feedback.
All reactions