Introduction

There was a time when Javascript, as a programming language, had no notion of modules. As such, the task of modularizing code fell on developers and their ability to organize and structure their code. This could be done by using functions or through the use of namespaces. Libraries such as RequireJS formalized this process and brought in asynchronous module definition (AMD), which then allowed us to load modules into our application dynamically and asyncronously, giving us what we call dynamic imports. In essence, dynamic imports let you split your code into various bundles that can be loaded on demand at run-time.

Split your code into smaller pieces.

The first and most obvious benefit is that it's easier to maintain. You've probably heard of the concept, "Don't put all your eggs in one basket," right? Well, this applies to writing code as well. The problem with having all of your code bundled together into one file (or folder) is that if something happens to break the whole app, you have no idea where the problem originated from or how far down in the stack it lies. When you split up your codebase into separate files or folders, it becomes much easier to pinpoint specific parts of the program that might be causing unexpected behavior or errors.

By splitting up our project into multiple files and folders we can also take advantage of something called modularization—which means we're breaking down large tasks into smaller ones which makes things easier for developers who work on projects over time (like myself).

Lazy-load react components.

You should also be using dynamic imports. They're a great way to lazy-load react components and they have a plethora of benefits, including:

• Decreasing server load. Because you're only loading the component when it's required, your server will run faster and require less resources for serving the same amount of content. This can be especially beneficial on slow connections like mobile, which experience longer loading times than desktop users due to their limited bandwidth.

• Reducing bundle sizes, especially if you're using code splitting or webpack bundles.

• [Improving user experience](slidesharecdn .com/slideshows/embed_code?key=0a1ff7ae&autoPlay=false&loop=false) by only showing components as soon as they are needed rather than having them loaded at all times (this might not seem like much but every millisecond counts!).

CSS-in-JS and component splitting.

CSS-in-JS allows for more modularity

CSS-in-JS allows for more flexibility in design

CSS-in-JS allows for easier scaling

CSS-in-JS allows for more code reuse

Importing components without JS bundling.

In this section, we'll be talking about using dynamic imports. Dynamic imports are a way to import components without having them bundled into one JS file. This means that you can import individual components without needing to bundle everything together in your main app codebase.

This is especially useful if you want to use some elements on a page but not all of them. For example, if you're building an application that has multiple pages and some parts of your UI may be reused across those pages (e.g., navigation menu), using dynamic imports allows us to only load the parts of our application that are needed on each page instead of having all our code bundled into one big bundle file and loading everything up front before rendering our web page or app interface elements.

No more dead code!

No more dead code!

By using dynamic imports, you'll never have to worry about unused components. With just a few lines of code, you can tell your build tool to remove any unused CSS and JavaScript from your app. You can even use this same tool to automatically remove unused images from the final bundle.

Branching out from static imports makes for a faster, less bulky app.

Dynamic imports are a cool new feature that allows you to load only the component you need at any given time, rather than having to import a whole module or library. In other words, if you’re importing something like React Router, you don’t need both components and reducers from it—you just want the component.

This is good for two reasons: firstly because it means your app is smaller and faster; secondly because it gives you freedom over which parts of your codebase should be bundled together into one file.

Conclusion

When using ES6 and dynamic imports, you will be writing less code to achieve the same result as with the ES5 way of doing things. Overall, I think the examples shown in this blog post are pretty clear and should help you decide whether or not to use ES6 dynamic imports in your application. As always, please feel free to leave your comments below 👇🏾