BestHub
Sign in
Tagged articles
153 articles
Page 2 of 2
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
HomeTech
HomeTech
Feb 15, 2023 · Frontend Development

How to Build Your Own Front‑End CLI Scaffold from Scratch

This article walks through why a custom front‑end scaffolding tool is needed, analyzes Vue CLI’s architecture, explains how to locate global commands, examines required dependencies, and provides a step‑by‑step implementation—including project initialization, command design, create‑command logic, Node version checks, template features, CDN upload, commit linting, and a custom ESLint plugin—so readers can create a reusable CLI tailored to their business needs.

CLINode.jsTooling
0 likes · 17 min read
How to Build Your Own Front‑End CLI Scaffold from Scratch
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
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Aug 12, 2022 · Frontend Development

Top Frontend Techniques, Design Tips, and Emerging Tech Insights

This article curates cutting‑edge frontend topics—including Vite micro‑frontend challenges, ByteDance's monitoring SDK design, React vs Vue diff algorithms, design simplification for tool products, motion design patterns, and the rise of graph databases—offering concise insights for modern web developers.

DesignVitefrontend
0 likes · 3 min read
Top Frontend Techniques, Design Tips, and Emerging Tech Insights
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
php Courses
php Courses
Jul 31, 2022 · Frontend Development

Useful npm Packages for Vue3 and Vite3 Development

This article presents a curated collection of npm libraries frequently used in Vue3 and Vite3 source code, offering developers ready‑to‑use tools for terminal styling, CLI interaction, argument parsing, file handling, debugging, environment management, bundling, testing, and more.

JavaScriptToolingVite
0 likes · 7 min read
Useful npm Packages for Vue3 and Vite3 Development
php Courses
php Courses
Jul 22, 2022 · Frontend Development

What's New in Vite 3.0: Template Updates, CLI Optimizations, and API Changes

The article introduces Vite 3.0's refreshed documentation, new template themes, CLI visual improvements, changed default port, rewritten import.meta.glob API, smaller bundle size, ESBuild minification, bug fixes, Node 14.18+ compatibility, and a yearly release commitment, emphasizing the need for developers to stay current.

CLIJavaScriptVite
0 likes · 3 min read
What's New in Vite 3.0: Template Updates, CLI Optimizations, and API Changes
JavaScript
JavaScript
Jul 16, 2022 · Frontend Development

What Is Vite and How Does It Accelerate Frontend Development?

Vite is a modern frontend build tool that combines a development server with hot module replacement (HMR) and a Rollup‑based bundler, enabling rapid development and efficient packaging of code for web applications.

RollupVitefrontend build tool
0 likes · 1 min read
What Is Vite and How Does It Accelerate Frontend Development?
Alipay Experience Technology
Alipay Experience Technology
Jun 21, 2022 · Frontend Development

What’s New in Umi 4? A Deep Dive into Its Latest Front‑End Features

Umi 4 is now available on npm and brings a host of new capabilities—including dual Vite/Webpack builds, faster default compilation with MFSU V3, Umi Max for enterprise back‑office, React Router 6, Vue support, automatic HTTPS, build progress UI, terminal logging, plugin APIs, dead‑code detection, and a lightweight UI—while outlining future roadmap items such as MFSU V4, Father 4, dumi 2, and bundless ESMi solutions.

SSRUmiVite
0 likes · 12 min read
What’s New in Umi 4? A Deep Dive into Its Latest Front‑End Features
vivo Internet Technology
vivo Internet Technology
Jun 8, 2022 · Frontend Development

Implementation and Integration of a Lightweight Vue Page‑Element Code Mapping Plugin

A lightweight Vue plugin injects file‑path and line‑number metadata into each element during build, lets developers click any page component (with a modifier key) to send a request to a local Node server that launches VSCode directly at the exact source line, streamlining navigation in large Webpack or Vite projects.

VSCodeVitecode mapping
0 likes · 15 min read
Implementation and Integration of a Lightweight Vue Page‑Element Code Mapping Plugin
21CTO
21CTO
May 28, 2022 · Frontend Development

2022 Tech Learning Roadmap: Rust, WASM, Vite SSR, Vue/React, Kubernetes, GraphQL

In this personal learning plan for 2022, the author outlines a deep dive into Rust and WebAssembly, explores Vite with server‑side rendering, experiments with Vue, React and Next.js, investigates Kubernetes for container orchestration, and examines GraphQL as a modern API alternative.

GraphQLReactRust
0 likes · 5 min read
2022 Tech Learning Roadmap: Rust, WASM, Vite SSR, Vue/React, Kubernetes, GraphQL
JD Retail Technology
JD Retail Technology
Mar 29, 2022 · Frontend Development

NutUI Theme Customization: Component‑Level Styling and Implementation Guide

This article explains how NutUI’s theme customization enables developers to switch skins, edit component‑level styles, and generate theme variables through an online configurator, providing step‑by‑step usage instructions, code examples for Vite, Webpack and Taro, and a detailed overview of the underlying implementation.

Component LibrarySassTheme Customization
0 likes · 11 min read
NutUI Theme Customization: Component‑Level Styling and Implementation Guide
php Courses
php Courses
Mar 24, 2022 · Frontend Development

Introduction to Vue 3, Its New Features and Composition API

This article provides a comprehensive overview of Vue 3—including its release details, performance gains, core architectural changes such as Proxy‑based reactivity, TypeScript support, the new Composition API (setup, ref, reactive, computed, watch, watchEffect), updated lifecycle hooks, new built‑in components like Fragment, Teleport and Suspense, project scaffolding with Vue‑CLI or Vite, and migration considerations from Vue 2.

Composition APIJavaScriptVite
0 likes · 14 min read
Introduction to Vue 3, Its New Features and Composition API
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 1, 2022 · Frontend Development

Comprehensive Guide to Building a Vue 3 + Vite + TypeScript Project with Full Tooling and Best Practices

This tutorial walks through setting up a modern Vue 3 development environment using Vite, TypeScript, ESLint, Stylelint, Pinia, Vue‑Router, Naive UI, ECharts, and Axios, covering Node.js installation, project scaffolding, configuration files, code standards, git hooks, and integration steps for each library.

EChartsNaive UIVite
0 likes · 37 min read
Comprehensive Guide to Building a Vue 3 + Vite + TypeScript Project with Full Tooling and Best Practices
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
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
Taobao Frontend Technology
Taobao Frontend Technology
Jan 24, 2022 · Frontend Development

What’s New in Vue, TypeScript, and Fastify? Latest Releases & Tools You Must Know

This roundup highlights Vue 3 becoming the default version, introduces TypeScript 4.6 Beta’s new features, showcases the fastify‑vite plugin for Vite SSR, presents the 1‑Line Layouts resource, reviews the Vite ecosystem article, discusses Node.js design flaws, and explains why uploading node_modules to remote repositories can be beneficial.

FastifyNode.jsVite
0 likes · 4 min read
What’s New in Vue, TypeScript, and Fastify? Latest Releases & Tools You Must Know
JD Retail Technology
JD Retail Technology
Dec 9, 2021 · Frontend Development

Building a High‑Performance BCRM Front‑End with Vue 3, Vite, and NutUI3

This article describes how a BCRM sales‑assistant front‑end was built in ten working days by parallelising development, adopting Vue 3, Vite and the NutUI3 component library, and applying performance tricks such as static‑hoisting, Promise.all, async/await optimisation and Vuex‑Map caching to achieve a fast, maintainable product.

NutUI3Performance OptimizationVite
0 likes · 14 min read
Building a High‑Performance BCRM Front‑End with Vue 3, Vite, and NutUI3
Baidu Geek Talk
Baidu Geek Talk
Dec 6, 2021 · Frontend Development

Next-Generation Document Reader Architecture and Implementation Using Canvas

The team replaced Baidu Wenku’s HTML‑CSS reader with a Canvas‑based architecture (CReader) that separates logic, data, parsing, rendering and application layers, enabling direct long‑image export, fast text selection, anti‑copy protection, annotation support, and cross‑platform deployment on PC, WAP and mini‑programs.

CanvasDocument ReaderText Selection
0 likes · 8 min read
Next-Generation Document Reader Architecture and Implementation Using Canvas
Laiye Technology Team
Laiye Technology Team
Dec 3, 2021 · Frontend Development

Understanding Native ES Modules and Why Vite Is So Fast

This article explains the concept of Native‑ESM, traces the evolution of JavaScript module systems from IIFE to ES Modules, and shows how Vite leverages native ES modules, ESBuild, and caching to achieve dramatically faster cold starts and hot updates compared to traditional bundlers like Webpack.

Build ToolES ModuleJavaScript
0 likes · 14 min read
Understanding Native ES Modules and Why Vite Is So Fast
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 4, 2021 · Frontend Development

What’s New in icejs 2.0? Exploring Vite Mode, SWC, and Enhanced Frontend Capabilities

icejs 2.0, the progressive React‑based framework from Alibaba’s ICE team, introduces Vite mode, Webpack 5 upgrades, SWC/esbuild compilation, expanded MPA/SPA/micro‑frontend support, SSG/SSR enhancements, pre‑bundled dependencies, and a unified development experience, while detailing performance benchmarks and migration steps.

SWCViteicejs
0 likes · 14 min read
What’s New in icejs 2.0? Exploring Vite Mode, SWC, and Enhanced Frontend Capabilities
Taobao Frontend Technology
Taobao Frontend Technology
Oct 15, 2021 · Frontend Development

How to Load Vite Micro‑Frontends with ES Modules in icestark

This article explains how Vite‑built micro‑frontends can be loaded as native ES modules in icestark, covering the advantages of ES‑module tooling, dynamic import techniques, necessary Vite configuration changes, and the resulting fast cold‑start and second‑load performance for progressive upgrades.

ES ModulesMicro FrontendsVite
0 likes · 13 min read
How to Load Vite Micro‑Frontends with ES Modules in icestark
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 27, 2021 · Frontend Development

Migrating a Vue 2 Project from Vue CLI to Vite: Step‑by‑Step Guide

This article provides a comprehensive step‑by‑step guide for migrating a Vue 2 project built with Vue CLI to Vite, covering project structure analysis, removal of Vue CLI dependencies, configuration changes, handling of environment variables, alias setup, JSX support, asset handling, and additional build optimizations.

JavaScriptVitebuild tools
0 likes · 20 min read
Migrating a Vue 2 Project from Vue CLI to Vite: Step‑by‑Step Guide
Sohu Tech Products
Sohu Tech Products
Sep 1, 2021 · Frontend Development

Comprehensive Architecture Guide for a Generic Backend Management System Using Vue and Vite

This article presents a detailed architecture solution for building a generic backend management system with Vue, covering project scaffolding choices, Vite configuration, ESLint/Prettier setup, CSS architecture (ITCSS, BEM, ACSS), JWT authentication, dynamic menu design, RBAC, route registration, component caching, and template generation using Plop.

JWTRBACVite
0 likes · 32 min read
Comprehensive Architecture Guide for a Generic Backend Management System Using Vue and Vite
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jul 5, 2021 · Frontend Development

How to Migrate Vue2 Projects to Vite 2.3.7: Step-by-Step Guide & Common Pitfalls

This guide explains which projects are suitable for migrating to Vite 2.3.7, provides a detailed migration workflow using Vite for development while keeping Webpack for production, and lists frequent issues with solutions, covering configuration, plugins, environment variables, proxy setup, TypeScript, JSX, and common debugging tips.

ViteVue2
0 likes · 10 min read
How to Migrate Vue2 Projects to Vite 2.3.7: Step-by-Step Guide & Common Pitfalls
ELab Team
ELab Team
Jul 1, 2021 · Frontend Development

Why Vite Beats Webpack: A Deep Dive into Its Fast Dev Server and Dependency Pre‑Bundling

This article explains the business need for faster development, introduces Vite and its origins, walks through its CLI, server creation, middleware pipeline, and especially its dependency pre‑bundling mechanism powered by esbuild, while also highlighting performance trade‑offs, ecosystem support, and production suitability.

Vitedependency pre‑bundlingdev server
0 likes · 33 min read
Why Vite Beats Webpack: A Deep Dive into Its Fast Dev Server and Dependency Pre‑Bundling
政采云技术
政采云技术
Jun 29, 2021 · Frontend Development

Vite's Features and Part of Source Code Analysis

This article introduces Vite's key features, including its Bundleless approach, native JavaScript module support, and advantages over traditional bundling, along with an analysis of its source code structure and hot update mechanisms.

BundlelessJavaScript modulesVite
0 likes · 11 min read
Vite's Features and Part of Source Code Analysis
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
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
ELab Team
ELab Team
Apr 29, 2021 · Frontend Development

How Vite Accelerates Frontend Development with Fast Builds & Hot Reload

Vite is a modern web development tool that leverages native ES modules, Koa server, and esbuild to provide instant cold starts, on‑demand compilation, and fast hot‑module replacement, eliminating traditional bundling steps while offering a flexible plugin system for handling dependencies, source files, and optimizations.

ES ModulesVitefrontend development
0 likes · 15 min read
How Vite Accelerates Frontend Development with Fast Builds & Hot Reload
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 2, 2021 · Frontend Development

Why ESM Build Tools Like Snowpack and Vite Beat Webpack

With the rise of ESM‑based build tools such as Snowpack and Vite, developers can bypass traditional bundling, achieving faster compilation and leveraging native browser module loading, while Webpack adapts through physical caching and Module Federation, offering flexible module sharing and performance optimizations for modern frontend projects.

ESMModule FederationVite
0 likes · 13 min read
Why ESM Build Tools Like Snowpack and Vite Beat Webpack
Aotu Lab
Aotu Lab
Mar 31, 2021 · Frontend Development

Future Web Development Roadmaps: Vite 2.0, AI Visuals, and Digital Currency

This article presents a curated roadmap for web developers, examines Vite 2.0’s build innovations, explores AI-driven visual effects, discusses product‑centric design principles, and outlines the emerging role of digital currency in modern software ecosystems.

RoadmapVitedigital currency
0 likes · 8 min read
Future Web Development Roadmaps: Vite 2.0, AI Visuals, and Digital Currency
QQ Music Frontend Team
QQ Music Frontend Team
Jan 9, 2021 · Frontend Development

What’s New in Vue 3? A Deep Dive into Architecture, Reactivity, and Vite

This article provides a comprehensive overview of Vue 3, covering its evolution from Vue 2, key new features such as TypeScript support, the Composition API, performance optimizations, the modular monorepo structure, the reactivity system built on Proxy, and the Vite development server that powers its ecosystem.

Composition APIJavaScriptReactivity
0 likes · 28 min read
What’s New in Vue 3? A Deep Dive into Architecture, Reactivity, and Vite
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