DEV Community

Boris Joskic
Boris Joskic

Posted on

Lazy loading modules with Webpack

Webpack is a great tool and it's really great to know at least basics of it. If we are working with Angular CLI, or Create React App, we already have webpack setup there, but if we are working on a web application that's not using a Javascript Framework, we should probably user a bundler. Sure, we could go with no-setup-needed Parcel but if we want more control, go with Webpack. My personal web site is all Javascript, only one HTML file and no framework. I'me using webpack as a bundler and lazy loading to improve performance and I'm really happy with it!

To get started, run npm init -y and create the following structure:

src / 
--- notLazyLoaded.js
--- lazyLoaded.js
Enter fullscreen mode Exit fullscreen mode

Run the following command to install webpack:

npm install webpack webpack-cli html-webpack-plugin webpack-dev-server --save-dev
Enter fullscreen mode Exit fullscreen mode

We've installed webpack, webpack plugin for adding our index.html into the bundle and dev server.

Let's add some code to our webpack config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./main.js",
  output: {
    filename: "[name].[hash].bundle.js",
    path: path.resolve(__dirname, "dist")
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    port: 9000
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"

Enter fullscreen mode Exit fullscreen mode

Inside our package.json, add a script to bundle and run.

 "webpack": "webpack-dev-server --open"
Enter fullscreen mode Exit fullscreen mode

Pretty basic but it will bundle our application and open our web application on port 9000.

Inside the HTML file, I've added 2 buttons, one will call notLazyLoaded.js and the other one will lazyLoaded.js

    <button id="alert">Alert</button> 
    <button id="lazyAlert">Lazy Alert</button>
Enter fullscreen mode Exit fullscreen mode

lazyLoaded.js and notLazyLoaded.js have basically same code.


const showLazyAlert = () => {
  alert("Hello from lazyLoaded.js");

export { showLazyAlert };

Enter fullscreen mode Exit fullscreen mode


const showAlert = () => {
  alert("Hello from notLazyLoaded.js");

export { showAlert };

Enter fullscreen mode Exit fullscreen mode

In our main.js, we will add code to show an alert depending of the button clicked.

import { showAlert } from "./src/notLazyLoaded";

window.onload = () => {
  const alertBtn = document.querySelector("#alert");
  const lazyAlertBtn = document.querySelector("#lazyAlert");

  alertBtn.addEventListener("click", () => {

Enter fullscreen mode Exit fullscreen mode

Currently, if we open the app, we see in the network tab that only main.js is loaded on initial load, we click the 'Alert' button and an alert shows up which is already loaded in the bundle. Now comes the main part, making changes so when user clicks on 'Lazy Alert' button, lazyLoaded.js module loads and executes.

Inside main.js, add following code

lazyAlertBtn.addEventListener("click", () => {
    import(/* webpackChunkName: "lazyLoaded" */ './src/lazyLoaded').then(module => {
Enter fullscreen mode Exit fullscreen mode

Save and open the app. On initial load, we only have the main.js bundle loaded, when we click the Lazy Alert button, lazyLoaded.js bundle loads and executes code. That's it. It will load only when it needs to load and will improve initial load time and overall performance of the app.

Source code is hosted on Github.

git clone
cd webpack-lazy-loading
npm i
npm run webpack
Enter fullscreen mode Exit fullscreen mode

Top comments (0)