DEV Community

Folarin Lawal
Folarin Lawal

Posted on

Ditch Dynamic Imports and Start Using Absolute Imports!

Absolute Imports and why you should stop using dynamic imports

Introduction

In this article, we will learn how absolute imports can be used with Node.js and why they are useful. We will also learn how to use absolute imports and why you should stop using dynamic imports. The tutorial is divided into five sections:

Static and Dynamic

Our first step to understanding the difference between static and dynamic imports is to define what each one is.

A static import is a way of importing an object from another file without using the built-in syntax (import. or from, for example). You can think of it like creating an alias for that module so you don't have to retype its long name every time. You can also use them with classes, functions, and constants that are defined in other modules.


static import {getFullName} from './getFullName';

Enter fullscreen mode Exit fullscreen mode

A dynamic import, on the other hand, will load modules into memory only when needed — either when they're called or if they're passed as arguments to functions/methods/etc...

Absolute Imports

Absolute Imports

Do you want your code to be performant? Then use absolute imports.

Do you want your code to be more reliable? Then use absolute imports.

Do you want your code to be more readable? Then use absolute imports.

Do you want your code to be maintainable? Then use absolute imports.

Do you want your code to scale better, or at all? Then use absolute imports (unless it's written in Python 3). The importance of using an explicit naming scheme is the same as with any other language: it makes things easier for people who come after us, especially when they're trying to understand our brilliant work!

Why you should use absolute imports

Absolute imports are a way of using imports in your JavaScript code that will never break.

You don't have to worry about your import being broken because it's not relative.

Absolute imports work with any bundler, transpiler, framework, or build tool out there.

Cons of absolute imports

There are many reasons to avoid absolute imports. They lack flexibility, make refactoring and maintenance difficult, make it hard to scale your app and cause you to have more files that are harder to test and debug.

Be sure to remove the "module" option in your babel.

The next step is to remove the "module" option in your babel. This is a legacy setting that has been deprecated since Babel 6, but it's still used by many and can cause problems with dynamic imports.

You can add this line to your .babelrc file:


{

"presets": [...],

"plugins": [...],

"env": {

"development": {},               "production": {}

} }, 
Enter fullscreen mode Exit fullscreen mode

Conclusion

We hope you now have the reasons to start migrating your codebase to absolute imports. We’re confident that you’ll love this feature and will never look back at dynamic imports again. Happy coding!

Discussion (2)

Collapse
chinmaymoghe profile image
Chinmay • Edited on

Might I suggest you using this

npmjs.com/package/babel-plugin-mod...

Pretty handy

Overall imports are not really the most important part of your code, I get that those are required for getting various modules but they don't do much in the code, they are kinda annoying, you always need to scroll down to the part where your actual code begins

Collapse
liunate profile image
Info Comment hidden by post author - thread only accessible via permalink
Nate Liu • Edited on

Without dynamic imports and split bundles, every single second added to the time the browser starts rendering your page content, some % of users just close the tab and think your app is broken.

Consider the % in million and sales leads.

And they just won't come back.

Some comments have been hidden by the post's author - find out more