DEV Community

Cover image for Compare the Old-School Way of Manual Code Management vs. Webpack's Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ
Dharmendra Kumar
Dharmendra Kumar

Posted on β€’ Edited on

4 1 1 1 1

Compare the Old-School Way of Manual Code Management vs. Webpack's Magic: Reduce File Size and Maximize Efficiency! πŸ§™β€β™‚οΈ

What is Webpack?

  • Webpack is a module bundler for JavaScript applications.
  • It bundles JavaScript files and other assets (CSS, images) into a single or multiple files for browsers.

Why Webpack?

  • Efficient bundling of code and assets.
  • Modular development: Supports breaking code into smaller, manageable files.
  • Optimization: Minifies, removes unused code (tree shaking), and enables faster loading.
  • Development tools: Hot Module Replacement (HMR) for faster development.
  • Cross-browser compatibility: Transpiles modern JS/CSS for older browsers.

Where to Use Webpack?

  • Large JavaScript applications with multiple dependencies.
  • Projects using React, Vue.js, Angular.
  • Single Page Applications (SPAs) and Progressive Web Apps (PWAs).
  • Any app needing asset bundling and performance optimization.

Key Features of Webpack:

  • Code Splitting: Loads parts of the app only when needed.
  • Tree Shaking: Removes unused code to reduce bundle size.
  • Loaders: Transforms files (e.g., CSS, images) for bundling.
  • Plugins: Automates tasks (e.g., HTML generation, code optimization).

πŸš€ Webpack: Before & After – A Game Changer! ⚑

Discover how Webpack transforms your project!

We’re diving into a side-by-side comparison of a project without Webpack vs. with Webpack. πŸ› οΈ This will show you just how much more efficient your workflow can be with bundling and optimizations!

Webpack Preview

Webpack Preview Link

🌱 Without Webpack: The Old Way πŸ’Ύ

When you structure a project without Webpack, you manually manage everything – from scripts to modules. Here's how your project setup would look:

πŸ”§ Project Structure

webpack-example-no-webpack/
β”œβ”€β”€ dist/
β”‚   └── index.html  # Main HTML file
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ math.js     # Utility functions
β”‚   β”œβ”€β”€ module.js   # Dynamically loaded
β”‚   └── index.js    # Main entry point
└── .gitignore
Enter fullscreen mode Exit fullscreen mode

βš™οΈ How the Code Looks Without Webpack

1. Utility Functions (math.js)

This file handles simple math utilities.

// src/math.js
function add(a, b) { return a + b; }   // Addition 
function subtract(a, b) { return a - b; }   // Subtraction
function multiply(a, b) { return a * b; }   // Multiplication
function divide(a, b) { return a / b; }   // Division

// Export as MathUtils to be used globally
export const MathUtils = { add, subtract, multiply, divide };
Enter fullscreen mode Exit fullscreen mode

2. Dynamically Loaded Module (module.js)

This file loads dynamically when needed.

// src/module.js
function greet() {
  console.log('Hello from dynamically loaded module!');
}

// Exposing greet globally
window.GreetModule = { greet };
Enter fullscreen mode Exit fullscreen mode

3. Main Entry Point (index.js)

Manages interactions with the browser and handles dynamic module loading.

// src/index.js
import { MathUtils } from "./math.js";

document.getElementById('load-module').addEventListener('click', function () {
  const script = document.createElement('script');
  script.src = '../src/module.js';  // Load module.js dynamically
  document.body.appendChild(script);

  script.onload = function () {
    GreetModule.greet();  // Trigger greet after loading
  };
});

console.log(`5 + 10 = ${MathUtils.add(5, 10)}`);
Enter fullscreen mode Exit fullscreen mode

⚑ With Webpack: The Modern Approach πŸ’₯

Webpack introduces bundling, code-splitting, and tree-shaking to make your code faster and more efficient. Here's what the structure looks like with Webpack:

πŸ”§ Project Structure

webpack-example-with-webpack/
β”œβ”€β”€ dist/
β”‚   β”œβ”€β”€ index.html        # HTML file with bundled JS auto-included
β”‚   └── main.bundle.js    # Bundled JS
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ math.js           # Utility functions (tree-shakable)
β”‚   β”œβ”€β”€ module.js         # Dynamically loaded module
β”‚   └── index.js          # Main entry point
β”œβ”€β”€ webpack.config.js      # Webpack configuration
└── package.json
Enter fullscreen mode Exit fullscreen mode

βš™οΈ How the Code Looks With Webpack

1. Utility Functions (math.js)

Functions are the same, but now Webpack will only include what's actually used.

// src/math.js
export function add(a, b) { return a + b; }   // Tree-shakable utilities
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }
export function divide(a, b) { return a / b; }
Enter fullscreen mode Exit fullscreen mode

2. Dynamically Loaded Module (module.js)

Now loaded with Webpack's import() for code splitting.

// src/module.js
export function greet() {
  console.log('Hello from dynamically loaded module!');
}
Enter fullscreen mode Exit fullscreen mode

3. Main Entry Point (index.js)

// src/index.js
import { add, multiply } from './math';  // Only used functions imported

console.log(`5 + 10 = ${add(5, 10)}`);

document.getElementById('load-module').addEventListener('click', () => {
  import('./module').then(module => {
    module.greet();  // Loaded dynamically by Webpack
  });
});
Enter fullscreen mode Exit fullscreen mode

πŸ”§ Webpack Configuration (webpack.config.js)

const path = require('path');

module.exports = {
  mode: 'production',  // Enables optimizations
  entry: './src/index.js',
  output: {
    filename: 'main.bundle.js',  // Bundled file
    chunkFilename: '[name].chunk.js',  // For dynamically imported modules
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true,  // Enables tree shaking
  },
};
Enter fullscreen mode Exit fullscreen mode

πŸ” What's the Difference?

🎯 Without Webpack

  • πŸ“ Manually handle script loading.
  • πŸ›‘ No optimization, tree shaking, or code splitting.
  • πŸ“‚ Larger file sizes and unoptimized code.

⚑ With Webpack

  • πŸš€ Automatic bundling and minification.
  • 🌲 Tree shaking: Only used code gets included.
  • ⏳ Code splitting: Load parts of the code only when needed.

🌟 Want to Explore This?

Check out the full repository here:

https://github.com/dharam-gfx/webpack-example

If you find this helpful, give the repo a ⭐! 😊

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more