BestHub
Sign in
Tag

Hot Module Replacement

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 20, 2024 · Frontend Development

Understanding Vite: What It Is, How It Works, and Its Differences from Webpack

This article explains what Vite is, distinguishes it from traditional scaffolding tools, details its underlying build‑tool principles, compares Vite with Webpack, and walks through its core architecture, plugin system, hot‑module replacement, and why it offers fast, on‑demand development experiences.

Frontend DevelopmentHot Module ReplacementWebpack Comparison
0 likes · 24 min read
Understanding Vite: What It Is, How It Works, and Its Differences from Webpack
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 30, 2024 · Frontend Development

Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism

This article explains how Vite achieves fast development by serving ES modules directly, using a connect‑based dev server with plugin‑driven transforms, pre‑bundling dependencies via esbuild, generating hash‑based cache keys, and reusing the same plugins in Rollup for production builds.

Dev ServerHot Module ReplacementJavaScript
0 likes · 9 min read
Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 2, 2024 · Frontend Development

Understanding Vite’s Development Server, Plugin System, and Pre‑Bundling Mechanism

This article explains how Vite speeds up frontend development by serving unbundled ES modules, using a plugin‑based transform pipeline, performing on‑the‑fly compilation, pre‑bundling dependencies with esbuild, and finally leveraging Rollup for production builds while maintaining consistent behavior across dev and prod environments.

ESMFrontend DevelopmentHot Module Replacement
0 likes · 9 min read
Understanding Vite’s Development Server, Plugin System, and Pre‑Bundling Mechanism
IT Services Circle
IT Services Circle
Mar 29, 2024 · Frontend Development

Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism

Vite accelerates development by serving unbundled ES modules directly to the browser, using a connect‑based dev server that compiles on‑demand, leverages esbuild for fast pre‑bundling of dependencies, generates hash‑based cache queries, and shares plugins with Rollup for consistent production builds.

Dev ServerFrontend DevelopmentHot Module Replacement
0 likes · 9 min read
Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism
360 Quality & Efficiency
360 Quality & Efficiency
Sep 15, 2023 · Frontend Development

Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies

This article explains webpack's hot module replacement mechanism and presents a series of practical optimizations—including disabling CompressionPlugin, selecting fast sourcemap types, configuring runtimeChunk as single, and using babel-plugin-dynamic-import-node—to reduce hot‑update build time from 12 seconds to around 1 second.

Frontend DevelopmentHot Module ReplacementPerformance
0 likes · 9 min read
Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 28, 2022 · Frontend Development

Understanding Vite’s Core Design and Implementation: Server Startup, Pre‑bundling, and HMR

This article explores Vite’s evolution and core architecture, detailing how it improves development server startup time, performs dependency pre‑bundling with esbuild, creates the dev server, handles HTML injection, and implements fast hot‑module replacement through WebSocket communication.

ESMFrontend DevelopmentHot Module Replacement
0 likes · 12 min read
Understanding Vite’s Core Design and Implementation: Server Startup, Pre‑bundling, and HMR
Beike Product & Technology
Beike Product & Technology
Jan 27, 2022 · Frontend Development

Understanding Vite: Architecture, Plugin Mechanism, and Development Workflow

This article explains how Vite leverages native ES modules, esbuild pre‑bundling, and a flexible plugin system to provide instant dev‑server startup, fast hot‑module replacement, and efficient dependency handling, contrasting its approach with traditional bundlers like webpack.

Dependency Pre-bundlingES ModulesFrontend Development
0 likes · 17 min read
Understanding Vite: Architecture, Plugin Mechanism, and Development Workflow
ByteDance ADFE Team
ByteDance ADFE Team
May 8, 2021 · Frontend Development

What Is Vite? A Fast Frontend Build Tool and Its Comparison with Webpack

Vite is a native ES Module‑driven frontend build tool that offers lightning‑fast cold starts, instant hot module replacement, and on‑demand compilation by eliminating bundle steps during development, while still using Rollup for production builds, providing a performance‑focused alternative to Webpack.

ES ModuleFrontend DevelopmentHot Module Replacement
0 likes · 11 min read
What Is Vite? A Fast Frontend Build Tool and Its Comparison with Webpack
政采云技术
政采云技术
Sep 25, 2019 · Frontend Development

Understanding Webpack Hot Module Replacement (HMR): Mechanism and Implementation

This article explains how Webpack's Hot Module Replacement works, covering its benefits, the build and watch processes, the role of webpack-dev-middleware and webpack-hot-middleware, and provides detailed code examples to illustrate the communication between the server and the browser.

Dev MiddlewareFrontend DevelopmentHMR
0 likes · 10 min read
Understanding Webpack Hot Module Replacement (HMR): Mechanism and Implementation