This content originally appeared on DEV Community and was authored by Dharmendra Kumar
🚀 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 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
⚙️ 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 };
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 };
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)}`);
⚡ 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
⚙️ 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; }
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!');
}
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
});
});
🔧 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
},
};
🔍 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 ⭐! 😊
This content originally appeared on DEV Community and was authored by Dharmendra Kumar
Dharmendra Kumar | Sciencx (2024-09-25T07:17:19+00:00) Compare the Old-School Way of Manual Code Management vs. Webpack’s Magic: Reduce File Size and Maximize Efficiency! 🧙♂️. Retrieved from https://www.scien.cx/2024/09/25/compare-the-old-school-way-of-manual-code-management-vs-webpacks-magic-reduce-file-size-and-maximize-efficiency-%f0%9f%a7%99%e2%99%82%ef%b8%8f/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.