Recommended Free Tools
JavaScript’s import defer * as feature from "./feature.js" lets you delay a statically declared module’s synchronous evaluation without making its callers asynchronous. The module graph is still fetched, parsed, and linked up front; evaluation begins when code accesses a property on the deferred namespace. That makes it useful for postponing initialization of optional, statically known functionality—not for postponing network loading.
What import defer does
A normal static import makes a module’s dependencies part of the importing module’s load and evaluation process. With import defer, the dependency graph is still resolved, fetched, parsed, and linked, but synchronous evaluation is postponed until the deferred namespace is accessed. MDN describes the distinction in its import defer reference.
Think of it as a static dependency declaration with delayed execution. It can postpone top-level work while keeping the consumer’s API synchronous. It does not hide missing modules, syntax errors, or invalid imports until first use: those are encountered during loading, parsing, or linking.
How to use the syntax
The supported form is a namespace import. For example:
#1 Best Overall
import defer * as compiler from "./compiler.js";
export function compile(path) {
return compiler.createProgram([path], {});
}The call to compile reads compiler.createProgram, triggering synchronous evaluation of the deferred module graph needed before that export can be used. If the function is never called, a purely synchronous deferred subgraph may never be evaluated.
There is no documented named-import form such as import defer { createProgram } from "./compiler.js". The namespace is the trigger: inspecting or destructuring an export can itself cause evaluation. The first access does not run only the statements associated with that export; the module’s top-level code runs as a whole, along with the synchronous dependencies required before it.
Rank #2
When to use it instead of static or dynamic import
| Option | Loading and execution | Good fit |
|---|---|---|
Ordinary static import |
Dependencies are loaded and evaluated as part of module loading. | The module is needed immediately, or its initialization effects must happen early. |
import defer * as ns |
The graph is fetched, parsed, and linked up front; synchronous evaluation waits for namespace property access. | The dependency is statically known, initialization can safely wait, and callers should remain synchronous. |
await import(specifier) |
Returns a promise for a module namespace after loading and evaluation; the specifier can be conditional or computed. | Loading itself should happen only on demand, or the module path is dynamic. Callers must handle the promise. |
Dynamic import() is the relevant alternative when you want to defer fetching as well as execution. Its promise-based behavior is documented in MDN’s import() reference. import defer instead avoids making the call chain asynchronous solely to delay synchronous initialization. The TC39 proposal presents reduced unnecessary startup CPU work as a motivation, not a guarantee or benchmark for any particular application.
Side effects, errors, and top-level await
- Move side effects only when timing is safe. Deferred top-level code runs later. Do not defer a module whose early effects are prerequisites for application code, such as installing a polyfill that must be present before another module runs.
- Evaluation errors can move to first use. Errors in work that remains deferred surface synchronously on the operation that triggers evaluation. Missing dependencies, parsing errors, and linking failures are not deferred.
- Top-level await changes the behavior. A directly imported module that uses top-level await cannot wait for a synchronous namespace property access, so it is evaluated eagerly. Asynchronous dependencies also run when required, while independent synchronous portions may remain deferred.
- Modules share state. Deferral does not create a separate copy of a module. A regular import of the same module can cause it to evaluate earlier, and module code executes at most once.
- The
thenexport is a special case. The deferred namespace does not expose an export namedthen. If that export is required, use a regular import or re-export it under a different name.
Check support before shipping
MDN currently labels import defer experimental, of limited availability, and not Baseline; some widely used browsers do not support it. Check the actual browsers and server-side runtimes you target, as well as whether your build and deployment chain can preserve or transform the syntax. Support varies, so do not assume native availability from the feature’s presence in a proposal or reference page. The MDN compatibility information is available in its feature reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
