This article explains why Vite builds projects faster than Webpack by detailing their underlying mechanisms, step‑by‑step configuration of Webpack for Vue, the creation of a custom bundler, and how Vite achieves on‑demand loading and hot module replacement.
This article presents a complete tutorial for implementing a near‑instant (second‑level) rollback mechanism for single‑page front‑end applications, covering the underlying idea, project setup with Vite and React, history recording, a lightweight Node server, and a petite‑Vue visual interface for selecting and applying previous builds.
This article details comprehensive strategies for accelerating H5 page load times, covering background analysis, performance metrics, loading strategies, preload/prefetch, DNS prefetch, preconnect, skeleton screens, image compression with WebP, CDN caching, bundle optimization with Vite/Webpack, and provides practical code examples and configuration snippets.
This article demonstrates how to style console.log output using %c placeholders, outlines the supported CSS properties, and walks through creating a lightweight, Vue‑devtool‑inspired log‑button library with Vite, TypeScript, ESLint, Husky, and ChatGPT‑generated UI color palettes, culminating in publishing the package to npm.
This article explains what source maps are, details their JSON structure, demonstrates how to generate them with Vite and Webpack, discusses choosing appropriate devtool options for development and production, and shows how to make them work in browsers, Sentry, and manual mapping.
This guide walks through creating a Chrome extension using Vue and Vite, covering project initialization, multi‑entry Rollup configuration for background scripts, UI development with tdesign‑vue‑next, debugging hash‑related loading issues, and final deployment steps.
This article explains why frontend projects historically needed bundling, describes the evolution of module systems such as CommonJS, AMD, CMD, and ESM, compares bundlers like Webpack and Rollup, and introduces bundle‑less tools like Vite that leverage native ES modules to improve development experience and performance.
This step‑by‑step guide shows backend developers how to create a small management system with Vue 3, TypeScript, Vite, and SpringBoot, covering the technology stack, development‑tool installation, project scaffolding, core components, routing, Pinia state, Axios API wrappers, TypeScript interfaces, environment configuration, and deployment.
This article explains how to adopt Vite in a Vue 2.x codebase, covering dependency installation, process and global polyfills, path‑alias handling, sass loader conflicts, template adjustments, and performance comparisons, while providing concrete configuration snippets for a smooth migration.
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.
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.
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.
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.
This article explains the concepts of monorepo versus multi‑repo, outlines the advantages of using a monorepo structure, and details why Vite, pnpm, and related tools are preferred for building a modern, efficient frontend component library.
This article documents a hands‑on experiment migrating a Vue 2 project to Vue 2.7 with Vite, covering setup steps, essential plugins, compatibility issues, performance benchmarks against webpack, and practical lessons for both new and legacy frontend applications.
The article reviews the historical progression of front‑end build techniques from simple script loading and file concatenation to dependency‑based bundlers like webpack and vite, and proposes a future service‑oriented build model to overcome scalability limits.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This article introduces a pure‑frontend avatar generator built with Vite and Vue 3, showcases its rich customization options, demonstrates how to run the project locally, and highlights its usefulness for learning Vue 3 and creating unique vector avatars.
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.
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.
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.
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.
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.
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.
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.
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.
This article walks through Vite's five static asset handling strategies—including public directory paths, import queries like ?url, ?raw, and ?worker—showing code examples, middleware behavior, and build‑time transformations so developers can quickly understand and apply each method.
This article explains how Vite, combined with esbuild, HMR, and Rollup plugins, can replace a Webpack‑based React component workflow, enabling on‑demand type extraction, markdown‑driven usage docs, instant hot updates, and efficient build output for large component libraries.
This article explains how replacing a Webpack‑based React component workflow with Vite and its plugins enables on‑demand type extraction, markdown‑driven usage docs, instant hot‑module replacement, and efficient build processes for large component libraries.
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.
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.
This article walks through Vite's CLI startup process, explains how the bin script links to the vite executable, details the devServer's five core modules and fifteen middleware components, and shows the createServer flow that powers Vite's fast, hot‑reloading development experience.
This article walks through the source‑code analysis of Vite, explains why Vite rewrites import paths and creates a .vite folder, and provides a complete, minimal implementation of a Vite‑like development server using esbuild, connect middleware, and Vue SFC compilation.
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.
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.
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.
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.
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.
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.
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.
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.
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.
