Docs
README
14.4 Bundlers & Build Tools
📖 Introduction
Bundlers transform your modular source code into optimized bundles for production. They resolve dependencies, transpile modern JavaScript, and optimize assets for fast loading.
┌─────────────────────────────────────────────────────────────────────────────┐
│ BUNDLER WORKFLOW │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ SOURCE FILES BUNDLED OUTPUT │
│ ──────────── ────────────── │
│ │
│ src/ dist/ │
│ ├── index.js ─┐ ├── bundle.js (optimized) │
│ ├── utils.js │ ├── vendor.js (dependencies) │
│ ├── api.js ├─▶ BUNDLER ──────▶├── styles.css (processed) │
│ ├── styles.css │ ├── images/ (optimized) │
│ └── images/ ─┘ └── index.html (injected) │
│ │
│ WHAT BUNDLERS DO: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 1. Resolve imports → Build dependency graph │ │
│ │ 2. Transform code → Babel, TypeScript, JSX │ │
│ │ 3. Bundle modules → Combine into fewer files │ │
│ │ 4. Tree-shake → Remove unused exports │ │
│ │ 5. Minify → Reduce file size │ │
│ │ 6. Code-split → Lazy-load chunks │ │
│ │ 7. Process assets→ CSS, images, fonts │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
🎯 Learning Objectives
By the end of this section, you will:
- •✅ Understand why bundlers are necessary
- •✅ Configure Webpack for real projects
- •✅ Use Vite for fast development
- •✅ Build libraries with Rollup
- •✅ Leverage esbuild for speed
- •✅ Implement tree-shaking and code-splitting
1️⃣ Why Bundlers?
┌─────────────────────────────────────────────────────────────────────┐
│ WHY WE NEED BUNDLERS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ WITHOUT BUNDLER: │
│ │
│ Browser loads 100 separate files: │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ GET /index.js ─┐ │ │
│ │ GET /utils.js │ │ │
│ │ GET /api.js ├── 100 HTTP requests! │ │
│ │ GET /components/A.js │ Waterfall loading │ │
│ │ GET /components/B.js │ Slow initial load │ │
│ │ ... ─┘ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ WITH BUNDLER: │
│ │
│ Browser loads few optimized files: │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ GET /bundle.js ─┐ │ │
│ │ GET /vendor.js ├── 2-3 requests │ │
│ │ GET /styles.css ─┘ Parallel loading │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ADDITIONAL BENEFITS: │
│ │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ • Transpilation → Use latest JS features everywhere │ │
│ │ • Minification → Smaller file sizes │ │
│ │ • Tree-shaking → Remove unused code │ │
│ │ • Code-splitting → Load code on demand │ │
│ │ • Hot Reload → Instant dev updates │ │
│ │ • Asset handling → Images, CSS, fonts │ │
│ │ • Environment vars→ Dev/prod configurations │ │
│ │ • Source maps → Debug production code │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
2️⃣ Bundler Comparison
┌────────────────────────────────────────────────────────────────────────────────────┐
│ BUNDLER COMPARISON │
├─────────────┬──────────────┬──────────────┬──────────────┬─────────────────────────┤
│ Feature │ Webpack │ Vite │ Rollup │ esbuild │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Speed │ Slow │ ⚡ Fast │ Medium │ ⚡⚡ Fastest │
│ │ (JS-based) │ (ESM+Go) │ (JS-based) │ (Go-based) │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Best For │ Complex │ Modern │ Libraries │ Simple/Fast │
│ │ apps │ apps │ packages │ builds │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Config │ Complex │ Minimal │ Medium │ Minimal │
│ │ Flexible │ Convention │ Plugins │ API-driven │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Dev Mode │ Dev Server │ Native ESM │ Watch mode │ Watch mode │
│ │ HMR │ Instant HMR│ │ │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Tree- │ ✅ Yes │ ✅ Yes │ ✅ Best │ ✅ Yes │
│ Shaking │ │ (Rollup) │ │ │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Code │ ✅ Yes │ ✅ Yes │ ✅ Yes │ ✅ Yes │
│ Splitting │ (powerful) │ │ │ (basic) │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Plugins │ Thousands │ Rollup + │ Many │ Limited │
│ Ecosystem │ │ Custom │ │ Growing │
├─────────────┼──────────────┼──────────────┼──────────────┼─────────────────────────┤
│ Learning │ Steep │ Easy │ Medium │ Easy │
│ Curve │ │ │ │ │
└─────────────┴──────────────┴──────────────┴──────────────┴─────────────────────────┘
RECOMMENDATION:
┌─────────────────────────────────────────────────────────────────────┐
│ • New web apps → Vite (fast dev, Rollup production) │
│ • Library/Package → Rollup (best tree-shaking) │
│ • Complex enterprise app → Webpack (most plugins/flexibility) │
│ • Speed-critical builds → esbuild (fastest, less features) │
│ • Legacy projects → Webpack (stable, documented) │
└─────────────────────────────────────────────────────────────────────┘
3️⃣ Webpack Configuration
Basic Setup
// ═══════════════════════════════════════════════════════════════
// webpack.config.js - Basic configuration
// ═══════════════════════════════════════════════════════════════
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// Entry point(s)
entry: {
main: './src/index.js',
// Multiple entries for code splitting
admin: './src/admin.js',
},
// Output configuration
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js', // main.abc123.js
clean: true, // Clean dist folder before build
},
// Mode: 'development' | 'production' | 'none'
mode: process.env.NODE_ENV || 'development',
// Source maps for debugging
devtool: 'source-map',
// Module rules (loaders)
module: {
rules: [
// JavaScript/JSX with Babel
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
// CSS
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
},
// SCSS/SASS
{
test: /\.s[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
// Images
{
test: /\.(png|jpg|gif|svg)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name].[hash][ext]',
},
},
// Fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[hash][ext]',
},
},
],
},
// Plugins
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['main'],
}),
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash].css',
}),
],
// Resolve configuration
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
},
},
// Dev server
devServer: {
static: './dist',
port: 3000,
hot: true,
open: true,
historyApiFallback: true,
},
// Optimization
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
┌─────────────────────────────────────────────────────────────────────┐
│ WEBPACK CONCEPTS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ENTRY OUTPUT │
│ ───── ────── │
│ Entry points Where to emit │
│ to start bundling the bundles │
│ │
│ entry: './src/index.js' output: { │
│ │ path: 'dist/', │
│ │ filename: 'bundle.js' │
│ ▼ } │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ LOADERS (Transform files) │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ Babel │ │ CSS │ │ Image │ │ │
│ │ │ Loader │ │ Loader │ │ Loader │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ │ │ │
│ │ PLUGINS (Extend functionality) │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌───────────┐ │ │
│ │ │ HtmlWebpack │ │ MiniCssExt │ │ DefinePlugin │ │
│ │ └─────────────┘ └─────────────┘ └───────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ MODE: │
│ • development: Fast builds, readable output │
│ • production: Minified, tree-shaken │
│ │
└─────────────────────────────────────────────────────────────────────┘
Advanced Webpack Features
// ═══════════════════════════════════════════════════════════════
// webpack.config.js - Production optimizations
// ═══════════════════════════════════════════════════════════════
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // Remove console.log
},
},
}),
new CssMinimizerPlugin(),
],
// Split chunks for caching
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 244000,
cacheGroups: {
// Vendor chunk
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 10,
},
// React chunk
react: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'react',
priority: 20,
},
// Common code chunk
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true,
},
},
},
// Runtime chunk for long-term caching
runtimeChunk: 'single',
// Module IDs for stable hashes
moduleIds: 'deterministic',
},
plugins: [
// Gzip compression
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js|css|html|svg)$/,
}),
// Bundle analysis
process.env.ANALYZE && new BundleAnalyzerPlugin(),
].filter(Boolean),
// Performance hints
performance: {
hints: 'warning',
maxEntrypointSize: 250000,
maxAssetSize: 250000,
},
};
4️⃣ Vite Configuration
Basic Setup
// ═══════════════════════════════════════════════════════════════
// vite.config.js - Modern, fast bundler
// ═══════════════════════════════════════════════════════════════
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
// Plugins
plugins: [react()],
// Dev server
server: {
port: 3000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
// Build options
build: {
outDir: 'dist',
sourcemap: true,
minify: 'terser',
// Chunk splitting
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
lodash: ['lodash'],
},
},
},
},
// Resolve aliases
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
},
},
// CSS options
css: {
modules: {
localsConvention: 'camelCase',
},
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`,
},
},
},
// Environment variables
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
});
┌─────────────────────────────────────────────────────────────────────┐
│ WHY VITE IS FAST │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ TRADITIONAL BUNDLER (Webpack): │
│ │
│ ┌──────────┐ ┌──────────────────┐ ┌──────────────┐ │
│ │ Source │ ─▶ │ Bundle ALL │ ─▶ │ Serve │ │
│ │ Files │ │ files first │ │ bundle │ │
│ └──────────┘ └──────────────────┘ └──────────────┘ │
│ ▲ │
│ │ │
│ SLOW on large projects! │
│ │
│ VITE (Native ESM): │
│ │
│ ┌──────────┐ ┌──────────────────┐ ┌──────────────┐ │
│ │ Source │ ─▶ │ Transform │ ─▶ │ Browser │ │
│ │ Files │ │ on demand │ │ loads ESM │ │
│ └──────────┘ └──────────────────┘ └──────────────┘ │
│ ▲ │
│ │ │
│ Only transform what's needed! │
│ │
│ KEY INNOVATIONS: │
│ • Native ES modules in browser (no bundling for dev) │
│ • esbuild for dependency pre-bundling (100x faster) │
│ • Hot Module Replacement that scales │
│ • Rollup for production (optimized output) │
│ │
└─────────────────────────────────────────────────────────────────────┘
5️⃣ Rollup Configuration
Library Building
// ═══════════════════════════════════════════════════════════════
// rollup.config.js - Best for libraries
// ═══════════════════════════════════════════════════════════════
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import { dts } from 'rollup-plugin-dts';
import pkg from './package.json' assert { type: 'json' };
const input = 'src/index.js';
export default [
// ESM build (for modern bundlers)
{
input,
output: {
file: pkg.module, // dist/index.esm.js
format: 'esm',
sourcemap: true,
},
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
],
},
// CommonJS build (for Node.js)
{
input,
output: {
file: pkg.main, // dist/index.cjs.js
format: 'cjs',
sourcemap: true,
exports: 'named',
},
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
],
},
// UMD build (for browsers / CDN)
{
input,
output: {
file: pkg.browser, // dist/index.umd.js
format: 'umd',
name: 'MyLibrary', // window.MyLibrary
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
external: ['react', 'react-dom'],
plugins: [
resolve(),
commonjs(),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
terser(), // Minify for production
],
},
// TypeScript declarations
{
input: 'src/index.ts',
output: {
file: 'dist/index.d.ts',
format: 'es',
},
plugins: [dts()],
},
];
// ═══════════════════════════════════════════════════════════════
// package.json for the library
// ═══════════════════════════════════════════════════════════════
{
"name": "my-library",
"version": "1.0.0",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"browser": "dist/index.umd.js",
"types": "dist/index.d.ts",
"sideEffects": false,
"exports": {
".": {
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs.js",
"types": "./dist/index.d.ts"
}
},
"files": ["dist"],
"peerDependencies": {
"react": ">=17.0.0"
}
}
6️⃣ esbuild Configuration
Ultra-Fast Building
// ═══════════════════════════════════════════════════════════════
// build.js - esbuild API
// ═══════════════════════════════════════════════════════════════
import * as esbuild from 'esbuild';
// Simple build
await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
minify: true,
sourcemap: true,
outfile: 'dist/bundle.js',
target: ['es2020'],
format: 'esm',
});
// Build with plugins and watch mode
const ctx = await esbuild.context({
entryPoints: ['src/index.js'],
bundle: true,
outdir: 'dist',
splitting: true,
format: 'esm',
// External dependencies (not bundled)
external: ['react', 'react-dom'],
// Loaders for different file types
loader: {
'.png': 'file',
'.svg': 'dataurl',
'.css': 'css',
},
// Define replacements
define: {
'process.env.NODE_ENV': '"production"',
},
// Plugins
plugins: [
// Custom plugin example
{
name: 'example-plugin',
setup(build) {
build.onStart(() => {
console.log('Build started...');
});
build.onEnd((result) => {
console.log(`Build finished with ${result.errors.length} errors`);
});
},
},
],
});
// Watch mode
await ctx.watch();
// Serve mode (dev server)
const { host, port } = await ctx.serve({
servedir: 'dist',
port: 3000,
});
console.log(`Server running at http://${host}:${port}`);
# esbuild CLI usage
# Basic bundle
esbuild src/index.js --bundle --outfile=dist/bundle.js
# Production build
esbuild src/index.js --bundle --minify --sourcemap --outfile=dist/bundle.js
# With external deps and splitting
esbuild src/index.js --bundle --splitting --format=esm --outdir=dist
# Watch mode
esbuild src/index.js --bundle --watch --outfile=dist/bundle.js
7️⃣ Tree-Shaking
┌─────────────────────────────────────────────────────────────────────┐
│ TREE-SHAKING │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Tree-shaking = Dead code elimination for ES Modules │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ // utils.js // After tree-shaking │ │
│ │ export function add() {...} function add() {...} │ │
│ │ export function sub() {...} // sub is removed! │ │
│ │ export function mul() {...} // mul is removed! │ │
│ │ export function div() {...} // div is removed! │ │
│ │ │ │
│ │ // app.js │ │
│ │ import { add } from './utils' // Only add is used │ │
│ │ add(1, 2); │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ REQUIREMENTS FOR TREE-SHAKING: │
│ │
│ ✅ Use ES Modules (import/export) │
│ ✅ Use static imports (not dynamic require) │
│ ✅ Mark package as side-effect free │
│ ✅ Avoid circular dependencies │
│ ✅ Don't use export default object │
│ │
│ ❌ PREVENTS TREE-SHAKING: │
│ │
│ // Bad: Object default export │
│ export default { │
│ add: () => {}, │
│ sub: () => {} // Can't be shaken! │
│ }; │
│ │
│ // Good: Named exports │
│ export const add = () => {}; │
│ export const sub = () => {}; │
│ │
└─────────────────────────────────────────────────────────────────────┘
Side Effects Configuration
// ═══════════════════════════════════════════════════════════════
// package.json - Mark side effects for tree-shaking
// ═══════════════════════════════════════════════════════════════
{
"name": "my-package",
"sideEffects": false, // Package is pure, tree-shake everything
// Or specify files with side effects
"sideEffects": [
"*.css",
"*.scss",
"./src/polyfills.js"
]
}
8️⃣ Code-Splitting
// ═══════════════════════════════════════════════════════════════
// Dynamic imports for code-splitting
// ═══════════════════════════════════════════════════════════════
// Route-based splitting
const routes = {
'/': () => import('./pages/Home.js'),
'/about': () => import('./pages/About.js'),
'/dashboard': () => import('./pages/Dashboard.js'),
};
async function navigate(path) {
const loadModule = routes[path];
if (loadModule) {
const module = await loadModule();
renderPage(module.default);
}
}
// Component-based splitting (React)
import React, { lazy, Suspense } from 'react';
const HeavyChart = lazy(() => import('./components/HeavyChart'));
const AdminPanel = lazy(() => import('./components/AdminPanel'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
{isAdmin && <AdminPanel />}
<HeavyChart data={data} />
</Suspense>
);
}
// Magic comments for chunk naming (Webpack)
const Analytics = import(
/* webpackChunkName: "analytics" */
/* webpackPreload: true */
'./analytics.js'
);
┌─────────────────────────────────────────────────────────────────────┐
│ CODE SPLITTING STRATEGIES │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. ROUTE-BASED SPLITTING │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ / ──────────────▶ main.js (small) │ │
│ │ /dashboard ─────▶ dashboard.chunk.js (lazy loaded) │ │
│ │ /settings ──────▶ settings.chunk.js (lazy loaded) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ 2. COMPONENT-BASED SPLITTING │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Core UI ────────▶ main.js │ │
│ │ Chart Library ──▶ chart.chunk.js (loaded when needed) │ │
│ │ Editor ─────────▶ editor.chunk.js (loaded when needed) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ 3. VENDOR SPLITTING │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Your code ──────▶ main.js (changes often) │ │
│ │ node_modules ───▶ vendor.js (cached long-term) │ │
│ │ React ──────────▶ react.js (cached very long) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ LOADING STRATEGIES: │
│ • Prefetch: Load when browser is idle (might need later) │
│ • Preload: Load immediately (will need soon) │
│ • Lazy: Load on demand (when route/component accessed) │
│ │
└─────────────────────────────────────────────────────────────────────┘
9️⃣ Summary
┌─────────────────────────────────────────────────────────────────────┐
│ KEY TAKEAWAYS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ CHOOSE YOUR BUNDLER: │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ Vite → Modern apps, fast development │ │
│ │ Webpack → Complex apps, extensive ecosystem │ │
│ │ Rollup → Libraries, optimal tree-shaking │ │
│ │ esbuild → Speed-critical, simple builds │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ OPTIMIZATION CHECKLIST: │
│ │
│ □ Enable tree-shaking (ES Modules + sideEffects: false) │
│ □ Split vendor code (separate chunk for node_modules) │
│ □ Lazy load routes (dynamic import for pages) │
│ □ Analyze bundles (webpack-bundle-analyzer, rollup-plugin-viz) │
│ □ Minify code (Terser, esbuild) │
│ □ Compress assets (gzip, brotli) │
│ □ Use content hashes (cache busting) │
│ □ Set performance budgets │
│ │
│ BEST PRACTICES: │
│ │
│ • Keep bundles under 250KB (before gzip) │
│ • Cache vendor chunks long-term │
│ • Prefetch important chunks │
│ • Monitor bundle size in CI/CD │
│ │
└─────────────────────────────────────────────────────────────────────┘
📚 Next Steps
Continue to 14.5 Module Patterns to learn:
- •Singleton pattern with modules
- •Factory modules
- •Facade pattern
- •Dependency injection
- •Module best practices