When building modern web applications - especially large and complex ones—performance is key to delivering a great user experience. One popular approach to managing complexity is using micro-frontends, where the app is split into smaller, independent parts. But even with this architecture, we still need to optimize performance to keep things fast and smooth.
In this article, we’ll explore two powerful techniques to boost performance in micro-frontends: Lazy Loading and Code Splitting with Webpack.
Why Performance Matters
Let’s say you’re building an online shopping site. If the site takes too long to load, users might leave before they even see your products. That’s not what we want, right?
By using smart performance techniques, we can make sure our site loads quickly and runs smoothly-keeping users happy and engaged.
Lazy Loading: Load Only When Needed
What Is It?
Lazy loading is a technique where parts of your site are only loaded when they’re actually **needed**. For example, instead of loading all images on a page at once, you can load each image only when the user scrolls down to it.
Simple Example with Images
<img src="placeholder.jpg" data-src="real-image1.jpg" alt="Image 1" class="lazy">
<img src="placeholder.jpg" data-src="real-image2.jpg" alt="Image 2" class="lazy">
<img src="placeholder.jpg" data-src="real-image3.jpg" alt="Image 3" class="lazy">
<script>
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll("img.lazy");
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove("lazy");
obs.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
}
});
</script>
Why It Helps
Less data loaded at once: Only visible content is downloaded.
Faster initial load: Especially helpful on slow connections.
Smoother experience: Content appears as users scroll.
Code Splitting with Webpack: Break It Down
What Is It?
Code splitting is a technique that breaks your JavaScript into smaller files (called "chunks") that are loaded only when needed. This way, users don’t have to download the entire app upfront.
How to Set It Up
1- Install Webpack:
npm install --save-dev webpack webpack-cli
2- Create a webpack.config.js file:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
3- Use import() to load modules dynamically:
document.getElementById('loadButton').addEventListener('click', () => {
import('./module.js').then(module => {
module.default();
});
});
4- In module.js:
export default function () {
console.log('Module loaded!');
}
Why It Helps
- Smaller initial bundle
- Better caching
- Loads only what’s needed, when it’s needed
Final Thoughts
Using techniques like lazy loading and code splitting can make a huge difference in how fast and responsive your app feels. By loading only what’s needed, when it’s needed, you create a much better experience for your users.
Try these techniques in your next project and see the difference for yourself!
If you found this helpful, leave a ❤️ and share it with other devs! Got questions or want to share your experience with micro-frontends? Drop a comment below! 👇