BestHub
Sign in
Tagged articles
19 articles
Page 1 of 1
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 ToolHot Module ReplacementVite
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
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.

ESMHot Module ReplacementRollup
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.

Hot Module ReplacementPre‑bundlingVite
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.

Hot Module ReplacementSourceMapfrontend development
0 likes · 9 min read
Optimizing Webpack Hot Module Replacement Speed: Plugins, Sourcemap, runtimeChunk, and Multi‑Page Strategies
37 Interactive Technology Team
37 Interactive Technology Team
Dec 26, 2022 · Frontend Development

How Does Webpack 4 Hot Module Replacement Work? A Deep Dive

This article explains Webpack 4’s hot module replacement feature, covering the compilation process, dev‑server setup, entry configuration, websocket communication, the role of HotModuleReplacementPlugin, and the detailed steps of detecting changes, downloading updates via JSONP, and applying updated modules in the browser.

Frontend BuildHot Module ReplacementJavaScript
0 likes · 14 min read
How Does Webpack 4 Hot Module Replacement Work? A Deep Dive
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.

ESMHot Module ReplacementPre‑bundling
0 likes · 12 min read
Understanding Vite’s Core Design and Implementation: Server Startup, Pre‑bundling, and HMR
Sensors Frontend
Sensors Frontend
Feb 22, 2022 · Frontend Development

Why Vite Beats Webpack: Deep Dive into Architecture and HMR

This article examines the limitations of bundle‑based tools like Webpack, introduces Vite’s ESM‑based approach, and provides a detailed analysis of Vite’s architecture, hot‑module‑replacement, module transformation, dependency graph, and plugin system, illustrating how it improves development speed and efficiency.

ESMHot Module ReplacementVite
0 likes · 13 min read
Why Vite Beats Webpack: Deep Dive into Architecture and HMR
ELab Team
ELab Team
Jan 5, 2022 · Frontend Development

Mastering Webpack Hot Module Replacement: Boost Your Development Speed

This article explains what Webpack's Hot Module Replacement (HMR) is, walks through its configuration steps, and dives deep into the underlying mechanisms—including the dev server, socket communication, and HotModuleReplacementPlugin—showing how HMR enables instant, state‑preserving updates during development.

Hot Module Replacementdev serverhmr
0 likes · 15 min read
Mastering Webpack Hot Module Replacement: Boost Your Development Speed
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 ModuleHot Module Replacement
0 likes · 11 min read
What Is Vite? A Fast Frontend Build Tool and Its Comparison with Webpack
Baidu App Technology
Baidu App Technology
Feb 4, 2021 · Frontend Development

Mastering Hot Module Replacement in San: Inside san-hot-loader

This article explains how to enable and configure Hot Module Replacement for the San framework using san-hot-loader, covering both San CLI and manual Webpack setups, the underlying HMR workflow, module detection logic, and the core code that injects runtime updates for components and stores.

Hot Module ReplacementJavaScriptSAN
0 likes · 21 min read
Mastering Hot Module Replacement in San: Inside san-hot-loader
WecTeam
WecTeam
Oct 28, 2020 · Frontend Development

How Does webpack-dev-server Work? Inside Its Core Hot‑Reload Mechanics

This article dissects the inner workings of webpack-dev-server, covering its command‑line entry point, the Server class initialization, the role of webpack-dev-middleware, websocket communication, hot module replacement logic, and how live‑reload and hot‑reload are orchestrated during development.

Hot Module Replacementdev middlewarefrontend development
0 likes · 23 min read
How Does webpack-dev-server Work? Inside Its Core Hot‑Reload Mechanics
Alibaba Terminal Technology
Alibaba Terminal Technology
Jul 15, 2020 · Frontend Development

How Bundleless Development with ESModules Supercharges Frontend Speed

This article explains why traditional bundlers like Webpack become slower as projects grow, introduces the Bundleless approach that leverages native ESModule loading in browsers, details core techniques and Vite implementation, and shares a real‑world POS case study showing dramatic improvements in startup and HMR performance.

BundlelessESModuleHot Module Replacement
0 likes · 17 min read
How Bundleless Development with ESModules Supercharges Frontend Speed
Alibaba Cloud Developer
Alibaba Cloud Developer
Jul 9, 2020 · Frontend Development

How Bundleless Development with ESModules Boosts Frontend Speed and Efficiency

This article explains the Bundleless development approach that leverages native browser ESModules to eliminate bundling, delivering dramatically faster startup, O(1) build complexity, near‑instant hot‑module replacement, and practical implementation details using Vite, along with a real‑world POS case study and migration challenges.

BundlelessESModuleHot Module Replacement
0 likes · 16 min read
How Bundleless Development with ESModules Boosts Frontend Speed and Efficiency
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 ModulesHot Module ReplacementVite
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.

Hot Module ReplacementJavaScriptWebpack-hot-middleware
0 likes · 10 min read
Understanding Webpack Hot Module Replacement (HMR): Mechanism and Implementation