Archivo empaquetado que combina múltiples archivos de código en uno o pocos archivos optimizados. Bundler es la herramienta que lo genera.
Un bundle es un archivo que combina múltiples módulos JavaScript (y otros assets) en uno o pocos archivos optimizados. El bundler es la herramienta que realiza este proceso. Por qué bundlear: - Reducir peticiones HTTP - Resolver dependencias entre módulos - Aplicar optimizaciones - Soportar módulos en navegadores antiguos Bundlers modernos: Vite (esbuild + Rollup), webpack, Parcel, esbuild, Rollup.
// Sin bundler - Múltiples scripts (lento) <script src="lodash.js"></script> <script src="react.js"></script> <script src="app.js"></script> // Con bundler - Un archivo optimizado <script src="bundle.js"></script> // webpack.config.js - Configuración básica module.exports = { entry: './src/index.js', output: { filename: '[name].[contenthash].js', path: path.resolve(__dirname, 'dist'), clean: true }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\/]node_modules[\/]/, name: 'vendors' } } } } }; // Code splitting dinámico const AdminPanel = lazy(() => import('./AdminPanel')); // Uso <Suspense fallback={<Loading />}> <AdminPanel /> </Suspense>
