What is dynamic import?

Dynamic import in JavaScript is a powerful mechanism for loading modules right when they are actually needed, directly at runtime. Unlike static import, which is fixed at compile time, dynamic import is implemented as a function that takes the path to the module as an argument. There are two main syntactic approaches for working with it. The first option involves using classic promises: import('./module').then(module => { module logic }). The second, more modern and convenient way is based on the async/await syntax, where the code looks like this: const module = await import('./module'). This approach makes asynchronous code linear and more readable, saving the developer from having to build chains of then methods.

The main practical benefit of dynamic import lies in implementing code splitting. When a web application grows to a large scale, sending the entire source code to the user as one huge file leads to serious delays during the initial page load. Dynamic import allows you to split the application into logical blocks and load them only when the user navigates to the corresponding section or performs a specific action.

Directly related to this is the concept of lazy loading. For example, heavy graphics libraries, complex modal windows, or rare admin panel sections do not need to be loaded at startup. They can be loaded "on the fly" at the moment of a user click. Since the dynamic import function always returns a Promise, the application can easily handle the loading state, show a waiting animation or spinner to the user, and catch exceptions via a try/catch block or the catch method in case of a network error. This makes modern web applications much more responsive and performant on any device, including mobile phones with slow internet connections.