> ## Content Index > Fetch the complete content index at: https://debugly.dev/llms.txt > Use this file to discover other available public pages before exploring further. # The Bundle That Shipped the Whole Library for One Function - URL: https://debugly.dev/whole-library-for-one-function/ - Published: 2026-10-09T15:43:00.000Z - Updated: 2026-10-17T05:56:00.000Z - Description: One import pulled the entire package into the client bundle, and the tree shaker could not help, because the import went through the barrel file, and the… - Author: Rohit Bhadani - Tags: Performance, Frontend, JavaScript I have chased this from the two kilobytes needed and the two hundred shipped end and from the nine hundred end, and the truth was in the hand-off, as it usually is. Here is the shape of the barrel import, and the one property that makes it defeat the tree shaker: the barrel re-exports everything, so the bundler must include the whole module graph to be sure, and the sure is the two hundred kilobytes for the two that were used. The case was a React app bundling a date library; the mechanics generalise to any package whose entry point is an index that re-exports. ## Why the tree shaker could not help The tree shaking is the dead code's removal, and the removal is the static analysis, and the analysis is the export's usage, and the usage is the removal's criterion, and the criterion is the direct import, and the direct is the path, and the path is the module, and the module is the analysable. The barrel is the index, and the index is the re-export, and the re-export is the everything, and the everything is the graph, and the graph is the side effects, and the side effects are the unknown, and the unknown is the conservative, and the conservative is the include, and the include is the whole, and the whole is the two hundred, and the two hundred is the tree shaking's failure. The failure is the side effects, because the bundler cannot prove the module has none, and the cannot is the package's declaration, and the declaration is the sideEffects field, and the field is the absent or the wrong, and the wrong is the include, and the include is the whole library, and the whole is the bundle, and the bundle is the nine hundred. ## Why the barrel exists The barrel is the convenience, and the convenience is the one import, and the one import is the clean, and the clean is the author's API, and the API is the user's experience, and the experience is the reason the barrel ships, and the ships is the default, and the default is the trap, because the convenience costs the consumer the bundle, and the cost is the invisible at the library's level and the visible at the site's. The fix is the deep import, and the deep is the path, and the path is the module, and the module is the two kilobytes, and the two is the tree shaking's success, and the success is the direct, and the direct is the bypass, and the bypass is the barrel's avoidance, and the avoidance is the one line change, and the change is the one hundred and ninety eight kilobytes saved. This is the same shape as [the Next.js bundle that shipped the server code to the client](https://debugly.dev/nextjs-server-client-bundle-leak/), and the shared property is the one worth fixing. ## The fixes **Import from the deep path.** The import names the module rather than the package, and the module is the two kilobytes, and the two is the fix, and the fix is the one line, and the line is the saving, and the saving is the one hundred and ninety eight, and the one hundred and ninety eight is the parse's reduction, and the reduction is the interaction's speed. **Prefer the library's ES module build.** The ESM build is the tree-shakeable, and the tree-shakeable is the removal, and the removal is the fix, and the fix is the package's export map, and the map is the modern entry, and the modern is the configuration, and the configuration is the resolver's, and the resolver's is the bundler's setting. **Analyse the bundle on every build.** The analyser is the report, and the report is the size, and the size is the regression's detection, and the detection is the fix, and the fix is the CI check, and the check is the budget, and the budget is the alert, and the alert is the prevention, because the unmeasured bundle grows silently. **Set a size budget and fail the build.** The budget is the limit, and the limit is the gate, and the gate is the block, and the block is the prevention, and the prevention is the fix, and the fix is the CI, and the CI is the discipline, because the bundle's growth is the death by a thousand imports. **Replace the library where one function is needed.** The date format is the few lines, and the lines are the own code, and the own code is the two kilobytes, and the two is the fix, and the fix is the removal, and the removal is the dependency's absence, and the absence is the bundle and the maintenance, and the two are the saving. ## The rule I keep A barrel import pulls the whole module graph into the bundle, and the tree shaker cannot remove what it cannot prove side-effect free. Import from the deep path, prefer the ES module build, analyse the bundle on every build, set a size budget that fails CI, and drop the library when one function is all you use. The bundle was nine hundred kilobytes and the app used one date formatting function worth about two, because the import went through the package's index and the index re-exported everything, and the bundler kept all of it to be safe. The lesson I keep is the property, not the incident. --- Published on [debugly.dev](https://debugly.dev/) by [Rohit Bhadani](https://debugly.dev/about/) | Founder of [Krova Cloud](https://krova.cloud/?ref=debugly.dev)