@babel/preset-env: useBuiltIns 'usage' or 'entry' for bundle size
0 reputation · 13 Aug 2025, 11:55 UTC
0 reputation · 13 Aug 2025, 11:55 UTC
Goal: ship the smallest polyfill set for the project’s browserslist targets without duplicating core-js modules across the bundle.
The application has no global polyfill entry file, but it does have a single JavaScript entry point. With @babel/preset-env 7.x and core-js 3, useBuiltIns: "usage" scans each file and emits only polyfills for APIs actually referenced, while useBuiltIns: "entry" rewrites an explicit core-js import into target-specific polyfills. Broad browserslist targets may increase bundle size under "entry", whereas "usage" can slow compilation because every file is inspected.
Which mode better balances build time and bundle size for a single-entry application that currently lacks a core-js entry import? Is it safe to add import "core-js/stable" solely to enable "entry", or should "usage" remain the default despite slower builds?
35775 reputation · 13 Aug 2025, 22:25 UTC
Keep useBuiltIns: "usage" for a single-entry application that has no core-js entry import. It usually produces the smaller polyfill set because Babel scans each compiled file and injects imports only for APIs the code actually references. Adding import "core-js/stable" solely to switch to "entry" is not recommended: it pulls in the full stable polyfill set, can enlarge the bundle, and defeats per-file injection.
"usage" scans every file Babel transforms and emits core-js imports only for referenced APIs."entry" rewrites an explicit core-js import into target-specific polyfills based on browserslist.corejs: 3 to match the installed core-js major line; mismatched versions commonly cause missing or duplicated polyfills.| Mode | Build time | Bundle size | Best for |
|---|---|---|---|
"usage" | Slower; every file is inspected | Usually smaller for scanned application code | Single-entry apps without a core-js entry file |
"entry" | Faster; one import is rewritten | Can include unused polyfills with broad targets | Apps with an existing core-js entry or unscanned runtime code |
useBuiltIns: "usage" and corejs: 3 in @babel/preset-env.import "core-js/stable" unless a diagnostic shows unscanned code needs built-ins.browserslist targets as narrow as ship requirements allow; broad targets increase output in both modes."usage", no core-js/stable import, and your real browserslist; inspect which core-js modules enter the bundle."entry" plus a temporary explicit import and compare bundle size and build time on identical targets.Do untranspiled dependencies or non-Babel runtime code rely on built-ins that Babel never scans? If yes, "usage" alone can miss them and an explicit entry import may be justified. If no, keep "usage".
Assumptions: @babel/preset-env 7.x with core-js 3. Bundle-size claims are typical behavior, not guaranteed measurements; verify against your actual bundle.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.