BestHub
Sign in
Tagged articles
31 articles
Page 1 of 1
ByteDance Web Infra
ByteDance Web Infra
Aug 6, 2025 · Frontend Development

How Tree Shaking Differs Across Webpack, esbuild, Turbopack, and Rollup

This article provides a concise overview of tree shaking mechanisms in major JavaScript bundlers—Webpack/Rspack, esbuild, Turbopack, and Rollup—explaining their implementation stages, static analysis techniques, optimization trade‑offs, and practical code examples that highlight each tool's strengths and limitations.

Code OptimizationRollupTree Shaking
0 likes · 20 min read
How Tree Shaking Differs Across Webpack, esbuild, Turbopack, and Rollup
Goodme Frontend Team
Goodme Frontend Team
May 13, 2024 · Frontend Development

How to Speed Up Frontend Build Times with Native Pre‑Compilation and Caching

By leveraging native code tools like esbuild, caching strategies, and a custom pre‑compilation workflow that fakes Webpack's DllPlugin output, this article shows how Mars framework teams dramatically cut compilation times—up to 40% faster—while handling module resolution, resource handling, and cross‑platform challenges.

Build Optimizationesbuildfrontend
0 likes · 14 min read
How to Speed Up Frontend Build Times with Native Pre‑Compilation and Caching
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 30, 2023 · Frontend Development

A Comprehensive Guide to Configuring and Optimizing esbuild for Frontend Projects

This article provides an in‑depth tutorial on using esbuild as a fast frontend bundler, covering its basic features, loader support, plugin ecosystem, source‑map options, path aliasing, external CDN handling, code compression, CSS compatibility, tree‑shaking, code‑splitting, hash‑based filenames, build‑time cleaning, environment variables, and TypeScript type checking.

Build ToolConfigurationTypeScript
0 likes · 34 min read
A Comprehensive Guide to Configuring and Optimizing esbuild for Frontend Projects
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 12, 2023 · Frontend Development

Deep Dive into Vite's Dependency Pre‑Bundling Process

This article explains why Vite is faster than bundlers like Webpack, introduces the concept of dependency pre‑bundling, walks through its implementation using esbuild plugins, and shows how to build a simplified custom Vite server that scans, resolves, and pre‑bundles third‑party modules.

JavaScriptPre‑bundlingVite
0 likes · 35 min read
Deep Dive into Vite's Dependency Pre‑Bundling Process
Programmer DD
Programmer DD
May 11, 2023 · Frontend Development

What’s New in Angular v16? A Deep Dive into the Latest Frontend Features

Angular v16 introduces a suite of groundbreaking features—including a developer preview of Signals, enhanced server‑side rendering hydration, an esbuild‑based CLI, standalone component migration, updated package formats, and deprecations—while requiring Node.js 16/18 and TypeScript 4.9 or newer.

Angularesbuildfrontend
0 likes · 9 min read
What’s New in Angular v16? A Deep Dive into the Latest Frontend Features
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 2, 2023 · Frontend Development

Evolution, Core Principles, and Comparison of Frontend Build Tools

This article explores the history, underlying mechanisms, and practical comparisons of frontend build tools—from early YUI and Ant scripts through AMD/CMD, Grunt/Gulp, Webpack, Rollup, esbuild, and Vite—illustrating how they transform development code into optimized production assets and addressing common performance and configuration challenges.

RollupVitebuild tools
0 likes · 24 min read
Evolution, Core Principles, and Comparison of Frontend Build Tools
ByteFE
ByteFE
Mar 1, 2023 · Frontend Development

Evolution, Core Principles, and Comparison of Frontend Build Tools

This article explores the evolution, core principles, and comparative analysis of frontend build tools—from early YUI/Ant and AMD/CMD to modern solutions like Webpack, Rollup, esbuild, and Vite—detailing their functionalities, implementations, performance considerations, and common challenges for developers.

Module BundlingRollupVite
0 likes · 25 min read
Evolution, Core Principles, and Comparison of Frontend Build Tools
JD Cloud Developers
JD Cloud Developers
Feb 28, 2023 · Frontend Development

How to Migrate a Vue 2 Project to Vite for Lightning‑Fast Development

This article walks through why Vite dramatically speeds up development, explains its architecture, and provides a step‑by‑step guide—including configuration changes, dependency installation, and common pitfalls—to successfully migrate a Vue 2 project built with Vue‑CLI to Vite.

Vitebuild toolsesbuild
0 likes · 11 min read
How to Migrate a Vue 2 Project to Vite for Lightning‑Fast Development
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
Tencent Cloud Developer
Tencent Cloud Developer
Sep 2, 2022 · Frontend Development

Understanding Vite's Dependency Scanning and Pre‑Bundling Process

Vite improves dev‑server startup and runtime speed by scanning every project HTML file (excluding node_modules) with an esbuild plugin that traverses the module graph, classifies JavaScript, assets, bare imports and framework files, creates virtual modules, and records each bare import’s actual path for pre‑bundling.

Dependency ScanningHTMLJavaScript
0 likes · 18 min read
Understanding Vite's Dependency Scanning and Pre‑Bundling Process
ByteDance Web Infra
ByteDance Web Infra
Aug 12, 2022 · Frontend Development

Understanding Bundle‑less: Concepts, Performance Findings, and a Self‑Developed Solution

This article explains the bundle‑less approach—including splitting bundles, no‑bundle development, and modular dependency distribution—presents performance tests that suggest an optimal chunk count of 10‑25, evaluates Vite’s advantages and drawbacks, and outlines a self‑built import‑map‑based solution with code examples.

Tree ShakingVitebundle-less
0 likes · 19 min read
Understanding Bundle‑less: Concepts, Performance Findings, and a Self‑Developed Solution
ByteDance Web Infra
ByteDance Web Infra
May 13, 2022 · Frontend Development

Understanding Tree Shaking, Dead Code Elimination, and Side Effects in JavaScript Bundlers

Tree shaking, a subset of dead‑code elimination based on ES2015 module syntax, removes unused top‑level code, while side‑effect analysis determines which modules can be safely omitted; this article explains the terminology, algorithms, safety vs optimization trade‑offs, and practical debugging steps for modern JavaScript bundlers.

JavaScript bundlersTree Shakingdead code elimination
0 likes · 19 min read
Understanding Tree Shaking, Dead Code Elimination, and Side Effects in JavaScript Bundlers
ELab Team
ELab Team
Apr 28, 2022 · Frontend Development

Why ESBuild and SWC Are Revolutionizing Frontend Build Performance

This article explains what ESBuild and SWC are, why they dramatically speed up JavaScript bundling and compilation compared to traditional tools, and provides practical guidance on integrating them into modern frontend workflows such as Vite, Webpack, and custom scripts.

Frontend Build ToolsGoJavaScript bundler
0 likes · 18 min read
Why ESBuild and SWC Are Revolutionizing Frontend Build Performance
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.

Plugin Systemdependency prebuilddev server
0 likes · 15 min read
Introduction to Vite: Architecture, Dependency Pre‑Build, and Plugin System
WeChatFE
WeChatFE
Mar 22, 2022 · Frontend Development

Why Vite Builds Blank on iOS 11 and How to Fix It with esbuild Target Settings

After upgrading a project to Vite, users on iOS 11 experienced blank pages due to compatibility issues caused by esbuild’s minification generating modern syntax; the article explains the root cause, examines legacy plugin settings, and shows how explicitly setting esbuild.target to 'es6' (or using terser) resolves the problem.

Frontend BuildViteesbuild
0 likes · 8 min read
Why Vite Builds Blank on iOS 11 and How to Fix It with esbuild Target Settings
58 Tech
58 Tech
Mar 10, 2022 · Frontend Development

Vite Principles, Implementation, and Migration Guide

This article provides a comprehensive tutorial on Vite, explaining its core principles, architecture, and practical implementation, while detailing a step‑by‑step migration from Webpack—including handling JSX, aliasing, module resolution, CSS, HMR, and performance improvements—complete with code snippets and real‑world challenges.

ViteWebpack Migrationbuild tools
0 likes · 24 min read
Vite Principles, Implementation, and Migration Guide
ByteDance ADFE Team
ByteDance ADFE Team
Feb 14, 2022 · Frontend Development

Vite Introduction: Features, Core Principles, and Plugin System

This article provides a comprehensive overview of Vite, covering its definition, advantages over traditional bundlers like Webpack and Snowpack, the underlying ESM‑based development server, hot‑module replacement mechanisms, esbuild pre‑bundling, Rollup integration, plugin architecture, and a balanced summary of its strengths and limitations.

Build ToolESMRollup
0 likes · 19 min read
Vite Introduction: Features, Core Principles, and Plugin System
ByteDance Terminal Technology
ByteDance Terminal Technology
Jan 21, 2022 · Frontend Development

Building a Universal Bundler with esbuild: Architecture, Plugin System, and Browser Adaptation

This article explores the architecture and implementation of a universal bundler based on esbuild, detailing its plugin system, virtual module capabilities, and strategies for adapting bundling processes to browser environments while addressing CommonJS compatibility, file system abstraction, and performance optimization.

BundlerCommonJS compatibilityPlugin System
0 likes · 25 min read
Building a Universal Bundler with esbuild: Architecture, Plugin System, and Browser Adaptation
ByteFE
ByteFE
Jan 7, 2022 · Frontend Development

Curated Frontend Development Resources and Articles

This collection presents a variety of recent frontend‑focused articles and tutorials—including WebGPU fundamentals, low‑code implementation principles, Esbuild performance tricks, design‑pattern insights, TypeScript type programming, NestJS dependency injection, Pinia state management, image‑loading optimization, and Immer.js immutable data handling—each accompanied by QR‑code links to the original sources.

NestJSWebGPUdesign-patterns
0 likes · 7 min read
Curated Frontend Development Resources and Articles
Aotu Lab
Aotu Lab
Sep 24, 2021 · Frontend Development

Accelerate Frontend Development with esbuild, Treemap, XState, TypeScript & V8

This article explores how to speed up Webpack builds with esbuild-loader, implements dynamic treemap visualizations for NetEase Cloud Music’s social voting feature, introduces XState’s finite‑state‑machine approach to state management, explains the inner workings of TypeScript, and provides a deep dive into the V8 JavaScript engine.

State ManagementTypeScriptV8
0 likes · 7 min read
Accelerate Frontend Development with esbuild, Treemap, XState, TypeScript & V8
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.

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

Improving Development Server Startup Speed with Unbundled Development: From Webpack to Vite and Custom Solutions

This article analyses the performance problems of traditional bundled development with Webpack, explores unbundled tools such as Snowpack, WMR and Vite, and details a custom dev‑server implementation that leverages CJS‑to‑ESM conversion, esbuild bundling, plugin architecture, and fast HMR to dramatically reduce startup time for large monorepos.

DevToolsViteesbuild
0 likes · 19 min read
Improving Development Server Startup Speed with Unbundled Development: From Webpack to Vite and Custom Solutions
ByteFE
ByteFE
Mar 16, 2021 · Frontend Development

Design and Implementation of a Universal Bundler Based on esbuild

This article explains the motivation, architecture, and implementation details of a universal bundler built on esbuild, covering bundler fundamentals, plugin systems, virtual modules, browser compatibility challenges, node module resolution, and practical usage scenarios for both frontend and backend development.

BundlerPlugin Systemesbuild
0 likes · 27 min read
Design and Implementation of a Universal Bundler Based on esbuild