BestHub
search
Sign in
Tag

Hot Module Replacement

1 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.

Build ToolFrontend DevelopmentHot Module Replacement
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 ReplacementSourceMap
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
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jul 29, 2021 · Frontend Development

How Vite Powers React: Deep Dive into Middleware, Transformations, and HMR

This article explains how Vite leverages native ESM, middleware, and a series of plugins to enable fast development and hot module replacement for React projects, covering setup, source code transformation, import analysis, and the @vitejs/plugin-react-refresh workflow.

Hot Module ReplacementVitebuild tools
0 likes · 9 min read
How Vite Powers React: Deep Dive into Middleware, Transformations, and HMR
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jun 14, 2021 · Frontend Development

Mastering Webpack HMR: From Basics to Custom Module Hot Updates

This article explains the background, concepts, workflow, and hands‑on setup of Webpack’s Hot Module Replacement (HMR), detailing server‑client communication, runtime mechanics, and how to manually implement module hot‑updates without a framework, complete with code examples and configuration tips.

Dev ServerFrontend DevelopmentHot Module Replacement
0 likes · 14 min read
Mastering Webpack HMR: From Basics to Custom Module Hot Updates
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jun 8, 2021 · Frontend Development

Mastering Webpack Dev Server: HMR, Proxy, and Live Reload Explained

This article demystifies Webpack Dev Server by detailing its core components—webpack-dev-middleware, hot module replacement, live reload, proxy, and history API fallback—while providing practical code examples and configuration tips to streamline local development, improve build performance, and simplify debugging in modern frontend projects.

Dev ServerFrontend DevelopmentHot Module Replacement
0 likes · 25 min read
Mastering Webpack Dev Server: HMR, Proxy, and Live Reload Explained
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.

Build ToolES ModuleFrontend Development
0 likes · 11 min read
What Is Vite? A Fast Frontend Build Tool and Its Comparison with Webpack
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jan 18, 2021 · Frontend Development

Why Vite Beats Webpack for Vue 3: Fast Startup, HMR, and On‑Demand Compilation

This article explains how Vite, built for Vue 3, solves Webpack's slow cold starts, sluggish hot updates, and heavy bundling by leveraging native ES Modules, a lightweight Koa server, and on‑demand compilation, while also comparing Vite with Snowpack.

ES ModulesFrontend DevelopmentHot Module Replacement
0 likes · 23 min read
Why Vite Beats Webpack for Vue 3: Fast Startup, HMR, and On‑Demand Compilation
Taobao Frontend Technology
Taobao Frontend Technology
May 30, 2020 · Frontend Development

How Vite Transforms Frontend Development: Fast Startup, ES Modules & HMR

This article explains Vite’s architecture, from its fast cold‑start and native ES‑module development server to its plugin system, build process, handling of Vue single‑file components, CSS preprocessing, and hot‑module replacement, showing how it differs from traditional bundlers like webpack.

ES ModulesFrontend DevelopmentHot Module Replacement
0 likes · 21 min read
How Vite Transforms Frontend Development: Fast Startup, ES Modules & HMR
政采云技术
政采云技术
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