Tag

Dev Server

1 views collected around this technical thread.

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 ReplacementPre‑bundling
0 likes · 9 min read
Understanding Vite’s Development Server Architecture 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.

Build ToolsDev ServerHot Module Replacement
0 likes · 9 min read
Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism
Tencent Cloud Developer
Tencent Cloud Developer
Aug 30, 2022 · Frontend Development

Comprehensive Guide to Webpack: Core Concepts, Configuration, Loaders, and Optimization

This comprehensive, step‑by‑step guide walks developers through Webpack’s core concepts, project setup, configuration files, development server with hot module replacement, essential loaders for CSS, images, Less, and Babel, plus optimization techniques such as JavaScript minification, CSS extraction, and output cleaning.

BabelDev Serverfrontend
0 likes · 15 min read
Comprehensive Guide to Webpack: Core Concepts, Configuration, Loaders, and Optimization
ByteFE
ByteFE
Apr 18, 2022 · Frontend Development

Introduction to Vite: Architecture, Dependency Pre‑Build, and Plugin System

This article provides a comprehensive overview of Vite, covering its motivation as a modern frontend toolchain, core features such as native ES‑module dev server, fast dependency pre‑bundling with esbuild, production builds via Rollup, and detailed explanations of its plugin architecture and debugging utilities.

Dev ServerVitedependency prebuild
0 likes · 15 min read
Introduction to Vite: Architecture, Dependency Pre‑Build, and Plugin System
ByteFE
ByteFE
Jun 2, 2021 · Frontend Development

Exploring Unbundled Development: From Webpack Bottlenecks to Vite‑Based Dev Server Solutions

This article examines the performance challenges of traditional bundled development with Webpack, evaluates emerging unbundled tools such as Snowpack, WMR, and Vite, and details the design and implementation of a custom unbundled dev server that accelerates startup, handles dependency preprocessing, resource transformation, and hot module replacement.

Dev ServerESMVite
0 likes · 22 min read
Exploring Unbundled Development: From Webpack Bottlenecks to Vite‑Based Dev Server Solutions
ByteDance Web Infra
ByteDance Web Infra
May 22, 2021 · Frontend Development

Understanding Vite: ESM‑Based Dev Server, HMR, Pre‑Bundling, and Rollup Integration

This article explains how Vite improves development experience over traditional bundlers by leveraging native ESM support for a fast dev server, efficient hot‑module replacement, pre‑bundling of Node modules, and seamless integration with Rollup plugins for production builds and SSR.

Dev ServerESMHMR
0 likes · 12 min read
Understanding Vite: ESM‑Based Dev Server, HMR, Pre‑Bundling, and Rollup Integration
Beike Product & Technology
Beike Product & Technology
Aug 31, 2018 · Frontend Development

Resolving Hot Refresh and Hot Module Replacement Issues in Webpack 4

This article explains why Webpack‑dev‑server's hot refresh failed in a mixed JS‑Node‑PHP project, analyses the underlying host‑checking logic, and provides step‑by‑step configuration changes—including whitelist adjustments, CORS handling, and proper HotModuleReplacementPlugin usage—to achieve reliable hot reload and hot module replacement.

CORSDev Serverfrontend
0 likes · 13 min read
Resolving Hot Refresh and Hot Module Replacement Issues in Webpack 4