What is static in static module bundling?

In the context of static module bundling, 'static' refers to the fact that the bundling process is performed ahead of time, during the build phase, rather than dynamically or at runtime. This is a key aspect of tools like Webpack, Parcel, and Rollup that generate optimized bundles for applications.

Difficulty: 6/10

Topics: Tree Shaking, ES Modules vs CommonJS, Dependency Graph

Scenario Questions

0-2 years experience

1
Imagine you imported a utility library using 'const utils = require("utils")' instead of 'import { format } from "utils"'. How does this change affect what Webpack outputs in your production build, and why?
2
You have a component that tries to load an image using 'const imgUrl = "./assets/" + imageName; const img = require(imgUrl);'. Why might Webpack bundle every single image in that assets folder instead of just the one you need, and how would you fix it?
3
You wrote a helper function in a file but never imported or used it anywhere in your app. When you run a production build, will that helper function end up in the final bundle? How does Webpack figure this out without running your code?

2-5 years experience

1
We recently upgraded a shared internal UI library, but our bundle size spiked. We noticed that even though we only import a single Button component, Webpack is bundling the entire library. What are some common reasons Webpack's static analysis fails to tree-shake a dependency, and how would you debug this?
2
We have a feature flag system. We tried writing 'if (isNewFeature) { import { NewFeature } from "./NewFeature" }' at the top level of a file, but Webpack threw a syntax error. Why does static bundling prevent us from putting standard imports inside conditional blocks, and how should we handle this instead?

5-8 years experience

1
We have a large SaaS platform with hundreds of routes. If we use dynamic import() for code splitting, Webpack statically generates separate chunks. However, this is causing a 'waterfall' of network requests at runtime. How would you design a chunking and prefetching strategy that balances static analysis limits with optimal runtime loading performance?
2
In our monorepo, we have a mix of legacy CommonJS packages and modern ESM packages. Webpack is struggling to optimize the bundle, resulting in duplicate helper functions and bloated chunks. How would you configure Webpack and your transpiler to ensure static analysis works optimally across these mixed-format internal dependencies?

8+ years experience

1
Our build times on a massive legacy Webpack codebase have grown to over 10 minutes. We are considering migrating to a modern tool like Vite or Rspack. Given how these tools leverage ESM and static analysis differently during development versus production, what architectural risks and compatibility issues (especially around dynamic requires or legacy plugins) should we evaluate before committing to this migration?
2
We are moving from a monolithic frontend to a micro-frontend architecture. Static module bundling traditionally assumes a single, closed-world dependency graph at build time. How do we reconcile the benefits of static bundling (like shared dependency deduplication and tree shaking) with the runtime-loading requirements of independent micro-frontends?

Follow-up Questions

❓How does the 'sideEffects' property in package.json assist Webpack's static analysis?
❓What happens when Webpack encounters a dynamic import() statement with a template literal?
❓How does Webpack handle circular dependencies during its static analysis phase?