Best of Webpack — 2024

1. 2
   Article

   Community Picks·2y

   Rspack

   Rspack optimizes web development by splitting code into smaller bundles, removing unused code with tree shaking, and offering compatibility with webpack plugins. It supports module federation for code sharing, manages static assets, and is compatible with webpack loaders. Features include hot module replacement, a high-performance dev server, parallel builds, faster transpilation through SWC, and advanced CSS optimizations with Lightning CSS. The JavaScript API allows customization of build processes.

   94
2. 3
   Article

   Community Picks·2y

   A dependency-free JavaScript ES6 slider and carousel

   A lightweight, dependency-free JavaScript ES6 slider and carousel that is modular and extendable. It weighs only ~28kb (~8kb gzipped) and is ready to use with modern bundlers like Rollup and Webpack. The slider is easy to integrate and theme, utilizing SASS styles based on the BEM methodology.

   90

   7
3. 4
   Article

   asayer·2y

   The Benefits of using CSS Modules

   CSS modules provide a way to write CSS code that is easy to reuse and organize, while solving common problems with CSS in large-scale projects. They enable local scope, support composition and inheritance of styles, and integrate well with modern web development tools and frameworks.

   70

   2
4. 5
   Article

   asayer·2y

   Minification in JavaScript: Making Sites Lighter

   Minification removes unnecessary characters from JavaScript code, such as white spaces and comments, to reduce file size and improve load times. It boosts web performance by saving bandwidth and speeding up page loads. Popular minification tools include UglifyJS, Google Closure Compiler, and Terser. Integration with build tools like Webpack can automate minification. React and Angular frameworks support minification, often through built-in tools and commands, enhancing application performance.

   44

   2
5. 6
   Article

   asayer·2y

   Integrate Lightning CSS into your project

   Learn how integrating Lightning CSS with build tools like Webpack, Parcel, Gulp, and Rollup can enhance web development efficiency. This guide details installation methods via CDN and npm, outlines setup for different build tools, and discusses CSS optimization techniques like minification and tree shaking. Key highlights include using modern workflows for asset bundling, preprocessing, and ensuring cross-browser compatibility.

   44
6. 7
   Article

   Community Picks·2y

   Micro Frontends with Native Federation 🍿

   Native Federation is a compile-time and runtime mechanism to allow different scripts (micro frontends) to share dependencies and expose/import components between each other. It builds upon the ideas of Module Federation. Native Federation and Module Federation have some differences in terms of tooling, dependencies, micro frontends, support manifest, on-the-fly updates, and module format. An example application is built to showcase Native Federation's capabilities and how it can be used.

   43

   1