BestHub
Sign in
Tagged articles
281 articles
Page 1 of 3
vivo Internet Technology
vivo Internet Technology
Feb 25, 2026 · Frontend Development

How We Built a Multi‑Region H5 Platform with One Codebase and 90% Cost Savings

This article details the design and implementation of a multi‑region H5 platform that uses a single codebase and unified architecture, covering platform UI internationalisation, unified login, three‑layer region storage, environment‑aware configuration, ZooKeeper service discovery, region‑specific DLL builds, and npm private‑registry strategies to achieve seamless deployment across multiple data centres while cutting development effort by up to ninety percent.

DeploymentVuefrontend
0 likes · 21 min read
How We Built a Multi‑Region H5 Platform with One Codebase and 90% Cost Savings
Sohu Tech Products
Sohu Tech Products
Dec 17, 2025 · Frontend Development

How Frontend Engineering Evolved: Choosing Between Webpack, Vite, and Rspack

This article traces the evolution of frontend engineering from static pages to modern modular workflows, explains the core responsibilities of bundlers, compares Webpack, Vite, and Rspack in terms of architecture, performance, configuration complexity, and ecosystem, and offers guidance on selecting the right tool for a project.

RspackVitebundling
0 likes · 23 min read
How Frontend Engineering Evolved: Choosing Between Webpack, Vite, and Rspack
大转转FE
大转转FE
Dec 15, 2025 · Frontend Development

From Static Pages to Modern Bundlers: How Webpack, Vite, and Rspack Evolve Frontend Engineering

This article traces the evolution of frontend engineering from static HTML pages to modular development, explains the core responsibilities of bundlers, compares Webpack, Vite, and Rspack in terms of architecture, performance, configuration complexity, and ecosystem support, and offers guidance on selecting the right tool for a project.

EngineeringRspackVite
0 likes · 24 min read
From Static Pages to Modern Bundlers: How Webpack, Vite, and Rspack Evolve Frontend Engineering
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 18, 2025 · Frontend Development

How to Slash Vue App Load Time: CDN, Gzip, and Code Splitting Tips

This guide walks through diagnosing a slow Vue admin dashboard, using webpack‑bundle‑analyzer to spot heavy libraries, offloading Element UI via CDN, enabling gzip compression on Nginx and in the Vue build, and applying code‑splitting and prefetch strategies to keep the first‑screen load under three seconds.

CDNCode SplittingGzip
0 likes · 9 min read
How to Slash Vue App Load Time: CDN, Gzip, and Code Splitting Tips
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
ByteDance Web Infra
ByteDance Web Infra
Aug 1, 2025 · Frontend Development

Why Module Federation 2.0 Is Revolutionizing Frontend Architecture

This article explores the evolution from Module Federation 1.0 to 2.0, detailing its architecture, pain points, new features, supported build tools, performance improvements, and how developers can adopt it across web and native platforms.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 9 min read
Why Module Federation 2.0 Is Revolutionizing Frontend Architecture
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 12, 2025 · Frontend Development

Master Tree Shaking: Eliminate Dead Code and Shrink Your Frontend Bundles

This article explains the principles of Tree Shaking, outlines prerequisites, demonstrates common pitfalls such as CommonJS usage, object aggregation, indirect re‑exports, side‑effect modules, and dynamic properties, and provides practical ways to verify that dead code has been successfully removed from your bundle.

ES ModulesFrontend OptimizationTree Shaking
0 likes · 8 min read
Master Tree Shaking: Eliminate Dead Code and Shrink Your Frontend Bundles
JavaScript
JavaScript
May 10, 2025 · Frontend Development

How Tree Shaking Trims Your JavaScript Bundle for Faster Loads

This article explains what Tree Shaking is, how it leverages the static nature of ES6 modules to eliminate dead code during bundling, and provides practical tips for developers to maximize bundle size reduction and improve web performance.

ES6 ModulesJavaScriptTree Shaking
0 likes · 9 min read
How Tree Shaking Trims Your JavaScript Bundle for Faster Loads
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 13, 2025 · Frontend Development

auto-i18n-translation-plugins: A Full-Automatic Frontend Internationalization Plugin for Vite and Webpack

The article introduces auto‑i18n‑translation‑plugins, a Babel‑based automatic internationalization plugin for frontend projects that works with Vite and Webpack, detailing its features, installation, configuration options, translator setup, usage examples, and best practices for generating multilingual JSON translation files without modifying business code.

Vitei18ntranslation
0 likes · 13 min read
auto-i18n-translation-plugins: A Full-Automatic Frontend Internationalization Plugin for Vite and Webpack
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 9, 2025 · Frontend Development

Managing and Optimizing Import Statements in Frontend Projects

This article explains why import statements can fill an entire file, examines the problems caused by excessive imports, and presents practical techniques such as module re‑export, require.context, dynamic import, webpack ProvidePlugin, Vite plugins, TypeScript namespaces, aliasing, and Babel plugins to keep import sections concise and maintainable.

ImportVitecode organization
0 likes · 11 min read
Managing and Optimizing Import Statements in Frontend Projects
Sohu Tech Products
Sohu Tech Products
Jan 22, 2025 · Frontend Development

Implementing a Webpack Plugin for Incremental CDN Upload with Caching

The article explains how to build a custom Webpack plugin that uploads compiled static assets to a CDN, rewrites public‑path references to CDN URLs, and employs a hash‑based cache file to skip unchanged files, cutting build time from 40 seconds to 17 seconds in large projects.

Build OptimizationCDNstatic assets
0 likes · 11 min read
Implementing a Webpack Plugin for Incremental CDN Upload with Caching
大转转FE
大转转FE
Jan 21, 2025 · Frontend Development

code‑inspector‑plugin: A Frontend Development Tool for Fast Source‑Code Location and IDE Integration

The article introduces code‑inspector‑plugin, an open‑source plugin for bundlers like webpack, Vite, and Rspack that lets developers click a DOM element in the browser to instantly open the corresponding source file in their IDE, detailing installation, configuration, usage, implementation principles, and common troubleshooting tips.

IDE integrationVitecode-inspector
0 likes · 24 min read
code‑inspector‑plugin: A Frontend Development Tool for Fast Source‑Code Location and IDE Integration
Sohu Tech Products
Sohu Tech Products
Jan 15, 2025 · Frontend Development

Tree Shaking in React.js: Principles, Best Practices and Applications

Tree shaking in React.js leverages ES6 static imports and named exports to eliminate dead code, reducing bundle size and improving load performance, while best practices such as modular design, avoiding side effects and dynamic imports ensure optimal dead‑code elimination across components and libraries.

Code OptimizationES6 ModulesReact.js
0 likes · 7 min read
Tree Shaking in React.js: Principles, Best Practices and Applications
Goodme Frontend Team
Goodme Frontend Team
Jan 13, 2025 · Frontend Development

Why Upgrading to Webpack 5 Breaks process.env and How to Fix It

This article recounts a production white‑screen caused by missing node polyfills after upgrading to webpack 5, explains how the undefined process.env variables triggered the crash, and shows how to diagnose and resolve the issue using DefinePlugin or a polyfill plugin.

DefinePluginfrontend debuggingnode polyfill
0 likes · 6 min read
Why Upgrading to Webpack 5 Breaks process.env and How to Fix It
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 9, 2024 · Frontend Development

Implementing Frontend Version Update Detection with Git Revision Plugin and Webpack

This article explains how to detect frontend deployment changes and prompt users to refresh by generating a git‑hash JSON file with git‑revision‑webpack‑plugin, creating Vue mixins for version checking, and comparing hashed filenames in the built index.html, covering three practical solutions with their pros and cons.

GitVersioningfrontend
0 likes · 10 min read
Implementing Frontend Version Update Detection with Git Revision Plugin and Webpack
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 2, 2024 · Frontend Development

Comprehensive Guide to Homepage Load Speed Optimization

This article provides a thorough, English-language guide to optimizing homepage loading speed, covering resource loading techniques, page rendering improvements, and practical Webpack, Nginx, and browser APIs with code examples for developers seeking performance gains.

frontendloadingwebpack
0 likes · 12 min read
Comprehensive Guide to Homepage Load Speed Optimization
Goodme Frontend Team
Goodme Frontend Team
Oct 28, 2024 · Frontend Development

Preventing Day.js Locale Pollution in Large Frontend Projects with Static Analysis

This article recounts a date‑misalignment bug caused by an unintended Day.js locale change in a mini‑program, explains why the global locale must remain unique, and details a comprehensive static‑analysis solution using ESLint, custom Webpack loaders, and Babel plugins to intercept and block Day.js locale modifications at compile time.

DayjsESLintfrontend
0 likes · 22 min read
Preventing Day.js Locale Pollution in Large Frontend Projects with Static Analysis
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 12, 2024 · Frontend Development

First Screen Optimization Techniques for Web Performance

This article explains what first‑screen optimization is and presents ten practical methods—including resource compression, image optimization, asynchronous loading, preloading, CSS/JS optimization, caching strategies, server‑side rendering, CDN acceleration, and delayed loading—complete with detailed Webpack configurations and code examples to improve initial page render speed.

first screenlazy-loadingoptimization
0 likes · 20 min read
First Screen Optimization Techniques for Web Performance
JD Tech Talk
JD Tech Talk
Sep 25, 2024 · Frontend Development

Migrating a Webpack Project to Vite Using the Golden Circle Framework

This article explains why and how to migrate a large Vue 2 Webpack codebase to Vite, applying Simon Sinek's Golden Circle model to clarify motivation, method, and concrete steps, and demonstrates the resulting dramatic reduction in build time and bundle size.

ViteVue2build tools
0 likes · 13 min read
Migrating a Webpack Project to Vite Using the Golden Circle Framework
JD Cloud Developers
JD Cloud Developers
Sep 25, 2024 · Frontend Development

How to Migrate a Large Webpack Project to Vite and Cut Build Time by 98%

This article explains why and how to migrate a complex Webpack‑based frontend project to Vite, using Simon Sinek's Golden Circle model, and details the step‑by‑step migration process, configuration changes, code snippets, and the resulting dramatic performance improvements.

Build OptimizationGolden CircleVite
0 likes · 13 min read
How to Migrate a Large Webpack Project to Vite and Cut Build Time by 98%
JD Tech
JD Tech
Sep 18, 2024 · Frontend Development

Migrating a Webpack Project to Vite: A Golden Circle Approach

This article explains how to apply Simon Sinek's Golden Circle framework to migrate a large‑scale Webpack‑based frontend project to Vite, detailing the motivations, the faster development experience, step‑by‑step migration procedures, configuration adjustments, and the resulting performance improvements.

JavaScriptVitebuild tools
0 likes · 13 min read
Migrating a Webpack Project to Vite: A Golden Circle Approach
Goodme Frontend Team
Goodme Frontend Team
Jul 1, 2024 · Frontend Development

Why Taro 4.0’s Vite Integration Fails and How to Fix It

This article explores the beta release of Taro 4.0, examines its new HarmonyOS support, CompileMode for mini‑programs, and Vite‑based build chain, then details the configuration pitfalls, debugging steps, source‑code analysis, and practical recommendations for a stable development workflow.

Rollupbuildfrontend
0 likes · 9 min read
Why Taro 4.0’s Vite Integration Fails and How to Fix It
Java Tech Enthusiast
Java Tech Enthusiast
May 15, 2024 · Frontend Development

Optimizing Frontend Asset Delivery with Nginx Gzip and Webpack Compression

This guide shows how to speed up Vue‑based web apps by configuring Nginx to serve gzip‑compressed files dynamically and using the compression‑webpack‑plugin to pre‑compress JavaScript and CSS during the build, cutting bundle size from megabytes to a few, and halving page‑load times without extra server load.

Frontend OptimizationGzipNginx
0 likes · 5 min read
Optimizing Frontend Asset Delivery with Nginx Gzip and Webpack Compression
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
ByteDance Web Infra
ByteDance Web Infra
Apr 28, 2024 · Frontend Development

Announcing Module Federation 2.0: New Features, Documentation, and Future Roadmap

Module Federation 2.0, released by ByteDance Web Infra and the original author, introduces best‑practice documentation, runtime‑tool decoupling, TypeScript type safety, a devtool, manifest protocol, and cross‑tool support to make micro‑frontend module sharing more flexible and developer‑friendly.

Frontend ArchitectureMicro FrontendsModule Federation
0 likes · 8 min read
Announcing Module Federation 2.0: New Features, Documentation, and Future Roadmap
ByteFE
ByteFE
Apr 16, 2024 · Frontend Development

Deep Dive into Webpack: Core Compilation Process, Plugins, Loaders, and Asset Emission

This article provides a comprehensive walkthrough of Webpack’s internal architecture, detailing the core JavaScript bundling workflow, the roles of Compiler and Compilation objects, the lifecycle of plugins and loaders, the parsing of modules into an AST, chunk creation, and the final emission of assets to the output directory.

Asset emissionChunk graphJavaScript bundling
0 likes · 27 min read
Deep Dive into Webpack: Core Compilation Process, Plugins, Loaders, and Asset Emission
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 7, 2024 · Frontend Development

My Frontend Engineering Practices and System

This article shares the author's practical experience with frontend engineering, covering topics such as project review, coding standards, monorepo tooling, custom CLI/SDK development, testing strategies, code review, bundling choices, monitoring, performance optimization, and knowledge consolidation for team empowerment.

Engineeringfrontendperformance
0 likes · 18 min read
My Frontend Engineering Practices and System
JD Retail Technology
JD Retail Technology
Mar 14, 2024 · Frontend Development

Performance Optimization of JD Star Store Mini‑Program: Practices, Results, and Future Outlook

This article details how JD Retail's technology team identified performance bottlenecks in the Star Store mini‑program, applied systematic monitoring, daily walkthroughs, and targeted code, packaging, and rendering optimizations—reducing JS error rates by 81%, cutting page load times by up to 28% and shrinking bundle size by nearly 10%—and outlines future plans for continued user‑experience improvements.

jsmini-programoptimization
0 likes · 14 min read
Performance Optimization of JD Star Store Mini‑Program: Practices, Results, and Future Outlook
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Feb 7, 2024 · Frontend Development

How to Boost H5 Game Performance with Offline Packages and Smart Asset Management

This article details a comprehensive approach to improving the performance and user experience of complex H5 game-like applications by using offline package splitting, native splash screens, global state management with zustand, data prefetching, image loading optimizations, transition animations, and ranking list enhancements.

H5OfflineReact
0 likes · 18 min read
How to Boost H5 Game Performance with Offline Packages and Smart Asset Management
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 4, 2024 · Frontend Development

Understanding Vue Form Validation, Scoped Data Attributes, Build Output, Remote Component Loading, and Render‑Function Dropdown

This article explains the principles and implementation details of Vue form validation, the generation of scoped data‑v‑xxx attributes, the composition of build output files, remote loading of .vue components, and how to create a dropdown menu using the render function, providing code examples and step‑by‑step explanations.

Dynamic ComponentScoped CSSVite
0 likes · 17 min read
Understanding Vue Form Validation, Scoped Data Attributes, Build Output, Remote Component Loading, and Render‑Function Dropdown
HelloTech
HelloTech
Feb 1, 2024 · Frontend Development

Static Compilation for Multi‑Scene SaaS Car Services Using Webpack Resolve Plugins

The article explains how a custom Webpack resolve plugin enables static compilation for a multi‑scene SaaS car‑service platform by separating brand‑specific logic into suffix‑named files, allowing compile‑time branching, smaller scenario‑specific bundles, cleaner code, easier testing, and faster cold‑starts.

frontendresolve pluginstatic compilation
0 likes · 12 min read
Static Compilation for Multi‑Scene SaaS Car Services Using Webpack Resolve Plugins
JD Tech
JD Tech
Jan 31, 2024 · Frontend Development

Performance Optimization Practices for JD's Tongtian Tower Frontend Project

This article shares the 2023 performance‑optimization experience of JD's Tongtian Tower front‑end project, explaining how reducing page load time, improving interaction response, and applying systematic analysis tools and best‑practice techniques can boost first‑screen speed by nearly 60 % while maintaining stable, iterative development.

bundle-analysiscachingfrontend
0 likes · 20 min read
Performance Optimization Practices for JD's Tongtian Tower Frontend Project
JD Retail Technology
JD Retail Technology
Jan 12, 2024 · Frontend Development

Front‑End Performance Optimization: Lessons from a Year of Improving First‑Page Load Speed by 58.8%

This article details a year‑long front‑end performance optimization effort for the Tongtian Tower project, covering analysis tools, caching strategies, code splitting, lazy loading, and business‑logic refinements that together delivered a 58.8% reduction in first‑screen load time.

CDNlazy loadingnetwork analysis
0 likes · 17 min read
Front‑End Performance Optimization: Lessons from a Year of Improving First‑Page Load Speed by 58.8%
JD Retail Technology
JD Retail Technology
Nov 30, 2023 · Frontend Development

Front‑End Performance Optimization: Understanding Browser Rendering, Web Vitals, and Practical Solutions

This article examines front‑end performance issues such as page freeze caused by heavy JavaScript computation, explains browser rendering threads, processes, and key Web Vitals (LCP, FID, CLS), and provides practical optimization techniques including code splitting, Web Workers, CDN usage, and build‑time configurations.

Web Workeroptimizationweb-vitals
0 likes · 26 min read
Front‑End Performance Optimization: Understanding Browser Rendering, Web Vitals, and Practical Solutions
Sohu Tech Products
Sohu Tech Products
Nov 22, 2023 · Frontend Development

How Does Next.js v14 Implement React Server Components (RSC)?

This article explains the origins of React Server Components, how Next.js v14 integrates RSC and App Router, the three release channels (Latest, Canary, Experimental), and provides step‑by‑step guidance for using RSC both inside and outside of Next.js with code examples and webpack configuration.

Next.jsRSCReact
0 likes · 9 min read
How Does Next.js v14 Implement React Server Components (RSC)?
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 29, 2023 · Frontend Development

Understanding Front-End Engineering: From Module Systems to npm and webpack

This article explains front‑end engineering, tracing its evolution from simple page building to modern modular architectures, and details how tools like npm, CommonJS, AMD, CMD, ESModules and webpack address challenges such as scope pollution, code standards, resource optimization, testing, CI/CD, and team collaboration.

Engineeringfrontendmodularization
0 likes · 17 min read
Understanding Front-End Engineering: From Module Systems to npm and webpack
Aotu Lab
Aotu Lab
Aug 25, 2023 · Frontend Development

How to Eliminate SPA Loading Delays with a Custom Webpack Preload Plugin

This article explains a custom Webpack plugin and React component solution that combines code splitting, lazy loading, and preloading to reduce first‑screen resource size, avoid long loading times, and improve user experience in SPA applications.

Code SplittingSPApreload
0 likes · 10 min read
How to Eliminate SPA Loading Delays with a Custom Webpack Preload Plugin
政采云技术
政采云技术
Jul 12, 2023 · Frontend Development

Detailed Explanation of Vue 2 Template Compilation Process

This article walks through how Vue 2 templates are compiled into render functions using webpack, vue‑loader, template‑loader and the underlying compiler, illustrating each step with project structure, source code snippets, and a deep dive into the AST‑to‑render pipeline.

Vuetemplate compilationvue-loader
0 likes · 16 min read
Detailed Explanation of Vue 2 Template Compilation Process
JD.com Experience Design Center
JD.com Experience Design Center
Jul 7, 2023 · Frontend Development

How to Boost Front‑End Performance by 279%: A Step‑by‑Step Optimization Guide

This article walks through a real‑world front‑end performance overhaul, explaining how Lighthouse metrics revealed major bottlenecks, detailing practical optimizations such as code splitting, lazy loading, image format changes, and CSP setup, and showing how monitoring tools keep the site fast over time.

LighthouseSEOfrontend
0 likes · 11 min read
How to Boost Front‑End Performance by 279%: A Step‑by‑Step Optimization Guide
Huolala Tech
Huolala Tech
Jul 4, 2023 · Frontend Development

How to Async Load Large Third‑Party Libraries in WeChat Mini‑Programs via Subpackages

This article explains how to overcome the 2 MB main‑package size limit in WeChat mini‑programs by asynchronously loading large third‑party libraries such as MQTT.js through subpackages, comparing subpackages with plugins, and providing practical Webpack and uni‑app solutions—including custom require handling, retry mechanisms, and performance gains.

SubpackageWeChat MiniProgramasync loading
0 likes · 14 min read
How to Async Load Large Third‑Party Libraries in WeChat Mini‑Programs via Subpackages
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Jun 2, 2023 · Frontend Development

Top Frontend Insights: AI Naming, PDF Chat, Performance Boosts & Hidden JS APIs

This roundup highlights cutting‑edge topics ranging from why AI models are named after alpacas and how to converse with PDFs, to practical front‑end performance gains, an in‑depth webpack resolve walkthrough, ten powerful reduce techniques, and five obscure JavaScript native APIs, plus a brief intro to a leading front‑end team.

APIJavaScriptfrontend
0 likes · 3 min read
Top Frontend Insights: AI Naming, PDF Chat, Performance Boosts & Hidden JS APIs
Aotu Lab
Aotu Lab
Apr 13, 2023 · Frontend Development

How to Triple Your Web App’s Speed: A Front‑End Performance Optimization Playbook

This article walks through a comprehensive front‑end performance optimization process—starting from diagnosing issues with Lighthouse, identifying bottlenecks such as large bundle size and uncompressed assets, applying code splitting, lazy loading, image optimization, CSP, SEO tweaks, and finally setting up continuous monitoring with a custom platform—to achieve a 279% improvement in Lighthouse performance scores and near‑three‑fold speed gains.

LighthouseSEOfrontend
0 likes · 11 min read
How to Triple Your Web App’s Speed: A Front‑End Performance Optimization Playbook
ByteFE
ByteFE
Mar 29, 2023 · Frontend Development

Understanding Frontend Bundling, Module Systems, and the Rise of Bundle‑less Development

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.

BundlelessVitebundling
0 likes · 13 min read
Understanding Frontend Bundling, Module Systems, and the Rise of Bundle‑less Development
ELab Team
ELab Team
Mar 27, 2023 · Frontend Development

How SourceMaps Work: Decoding VLQ and Babel’s Generation Process

This article explains the purpose and format of JavaScript SourceMaps, details the VLQ‑based encoding of the mappings field, and walks through how tools like webpack and Babel generate SourceMaps to map transformed code back to the original source for effective debugging.

JavaScriptSourceMapVLQ
0 likes · 17 min read
How SourceMaps Work: Decoding VLQ and Babel’s Generation Process
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 13, 2023 · Frontend Development

Understanding Plugin Systems: Concepts, Types, and Implementation in Front‑end Development

The article explains plugin systems by likening them to interchangeable vacuum‑cleaner heads, outlines their benefits, defines core‑and‑plugin architecture, describes four plugin styles with code examples, and demonstrates building a minimal front‑end calculator plugin framework that emphasizes a stable core and extensible modules.

Design PatternsJavaScriptPlugin System
0 likes · 19 min read
Understanding Plugin Systems: Concepts, Types, and Implementation in Front‑end Development
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
HelloTech
HelloTech
Feb 28, 2023 · Frontend Development

Design and Implementation of a Taro Component Library with Integrated Documentation and Demo

The article describes building a Taro component library whose components, documentation and live demos are generated from a single Markdown source, using Rollup‑built ES modules, a Vite‑based static site, a custom webpack markdown loader, and an isolated H5 demo project to ensure maintainable, reusable code and synchronized documentation.

Component LibraryDocumentationRollup
0 likes · 10 min read
Design and Implementation of a Taro Component Library with Integrated Documentation and Demo
Architecture & Thinking
Architecture & Thinking
Feb 9, 2023 · Frontend Development

Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules

This article introduces the concept and motivation behind Webpack's Module Federation, explains host and remote roles, outlines practical use cases such as micro‑frontend architecture and resource sharing, and provides a step‑by‑step code walkthrough—including configuration, shared dependencies, and runtime loading—to help developers quickly adopt this decentralized module‑sharing technique.

Micro FrontendsModule Federationfrontend development
0 likes · 8 min read
Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules
Baidu Geek Talk
Baidu Geek Talk
Feb 6, 2023 · Frontend Development

Mastering Module Federation: A Hands‑On Guide to Micro‑Frontend Architecture

This article explains the concept, motivation, and application scenarios of Webpack 5 Module Federation, walks through a concrete project structure and configuration, demonstrates runtime code integration, analyzes the generated bundles, and provides resources for further learning, offering a practical entry point into micro‑frontend development.

Code SplittingFrontend ArchitectureMicro Frontends
0 likes · 8 min read
Mastering Module Federation: A Hands‑On Guide to Micro‑Frontend Architecture
Sohu Tech Products
Sohu Tech Products
Jan 25, 2023 · Frontend Development

Micro‑Frontend Architecture with Webpack Module Federation – Part 1

This article explains how a growing React‑based admin panel was split into independent micro‑frontends using Webpack Module Federation, covering the background, reasons for choosing federation, three integration patterns, step‑by‑step setup, routing, shared state, hot‑reload, deployment considerations and practical code examples.

Frontend ArchitectureModule Federationmicro-frontend
0 likes · 13 min read
Micro‑Frontend Architecture with Webpack Module Federation – Part 1
DeWu Technology
DeWu Technology
Dec 28, 2022 · Frontend Development

Frontend Performance Optimization for SCM Application

By shrinking HTML to under 14 KB, replacing large global packages with selective imports, introducing dynamic and lazy loading, externalizing stable libraries via CDN, and caching menu data, the SCM frontend’s common bundle dropped from 1.4 MB to below 200 KB, dramatically improving first‑paint rates and overall page‑load performance.

SCMVuefrontend
0 likes · 11 min read
Frontend Performance Optimization for SCM Application
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
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 20, 2022 · Frontend Development

How to Slash Frontend Bundle Size: Babel, Polyfills, Tree‑Shaking & Duplicate Dependency Fixes

This article examines why bundle size matters for front‑end performance and provides a step‑by‑step guide to reducing Webpack output by optimizing Babel polyfills, leveraging @babel/preset‑env, using @babel/runtime, applying tree‑shaking, and eliminating duplicate dependencies.

Frontend OptimizationPolyfillTree Shaking
0 likes · 12 min read
How to Slash Frontend Bundle Size: Babel, Polyfills, Tree‑Shaking & Duplicate Dependency Fixes
Huolala Tech
Huolala Tech
Dec 6, 2022 · Frontend Development

Automate Vue Event Tracking Extraction with JSDoc, Webpack & ESLint

This article describes how to build a tool that automatically extracts event tracking (埋点) information from Vue H5 projects by leveraging custom JSDoc tags, Webpack dependency analysis, and an ESLint plugin, enabling one‑click generation of comprehensive tracking documentation and route mapping.

ESLintJSDocVue
0 likes · 13 min read
Automate Vue Event Tracking Extraction with JSDoc, Webpack & ESLint
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 18, 2022 · Frontend Development

Deep Dive into Webpack Core Workflow, Loader/Plugin Execution Order, and Optimization Strategies

This article explores Webpack's core build process—from startup and compilation to module handling and asset emission—clarifies the execution sequence of loaders versus plugins, explains loader chaining mechanics, and discusses practical optimization techniques for improving build speed and bundle size.

Build Processloadermodule bundler
0 likes · 11 min read
Deep Dive into Webpack Core Workflow, Loader/Plugin Execution Order, and Optimization Strategies
ELab Team
ELab Team
Nov 12, 2022 · Frontend Development

Build Your Own Mini Webpack: A Step‑by‑Step Guide to Single‑Entry Bundling

This article walks through creating a minimal webpack implementation that bundles a single entry file, covering prerequisite knowledge, initialization parameters, compilation steps, loader handling, dependency resolution, chunk creation, and file generation, complete with code examples and explanations.

Build ToolBundlerJavaScript
0 likes · 12 min read
Build Your Own Mini Webpack: A Step‑by‑Step Guide to Single‑Entry Bundling
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Nov 2, 2022 · Frontend Development

How Upgrading to Webpack 5 Slashed Build Times by 60% in a Large Music App

This guide details how a massive music‑artist web application reduced its full build time from 140 seconds to 55 seconds and its incremental compile time from up to 80 seconds down to about 1 second by migrating from Webpack 4 to Webpack 5, including preparation steps, configuration changes, and common pitfalls.

Build OptimizationJavaScriptMigration Guide
0 likes · 17 min read
How Upgrading to Webpack 5 Slashed Build Times by 60% in a Large Music App
ELab Team
ELab Team
Oct 21, 2022 · Frontend Development

Mastering Code Sharing in Micro‑Frontends with Webpack 5 Module Federation

This article explores various strategies for sharing code across micro‑frontend applications—including NPM packages, monorepos, Webpack DLLPlugin, Externals, and the powerful Webpack 5 Module Federation—detailing their configurations, performance trade‑offs, and practical implementation steps to achieve efficient, dynamic module sharing.

Module Federationcode sharingmicro-frontend
0 likes · 19 min read
Mastering Code Sharing in Micro‑Frontends with Webpack 5 Module Federation
DaTaobao Tech
DaTaobao Tech
Oct 20, 2022 · Frontend Development

Evolution of Build-Scripts: Architecture, Plugins, and Multi-Task Configuration for Frontend Projects

The article traces the evolution of the unified build‑scripts scaffold—from a basic webpack project to an npm‑packaged, plugin‑driven system that merges user‑defined build.json settings, leverages webpack‑chain for chainable configuration, and finally supports multiple named tasks, demonstrating a flexible architecture for modern frontend development.

ConfigurationTypeScriptbuild-scripts
0 likes · 28 min read
Evolution of Build-Scripts: Architecture, Plugins, and Multi-Task Configuration for Frontend Projects
Taobao Frontend Technology
Taobao Frontend Technology
Sep 19, 2022 · Frontend Development

How to Transform Build‑Scripts into a Flexible, Plugin‑Based Architecture for Frontend Projects

This article walks through the step‑by‑step evolution of a unified build‑scripts scaffold—from simple start/build/test commands to a modular, plugin‑driven system that supports shared configurations, user overrides, webpack‑chain, and multi‑task builds across multiple frontend projects.

Configuration ManagementFrontend toolingbuild-scripts
0 likes · 33 min read
How to Transform Build‑Scripts into a Flexible, Plugin‑Based Architecture for Frontend Projects
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 2, 2022 · Frontend Development

How to Build a Standardized Webpack + React + TypeScript Front‑End from Scratch

This tutorial walks you through creating a production‑ready front‑end project from an empty directory using Webpack 5, React 18 and TypeScript, covering project structure, dependencies, Babel and TypeScript setup, resource handling, development environment, performance optimizations, and full configuration files.

ConfigurationESLintReact
0 likes · 26 min read
How to Build a Standardized Webpack + React + TypeScript Front‑End from Scratch
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
政采云技术
政采云技术
Aug 2, 2022 · Frontend Development

A Brief Discussion on Remote Component Loading Solutions for Low‑Code Platforms

This article examines low‑code development platforms and presents three remote component loading strategies—global‑object, AMD (require.js), and ESModule—detailing their packaging, CDN deployment, loading logic, advantages, drawbacks, and a final recommendation for ESModule‑based loading in modern front‑end development.

AMDESMVue
0 likes · 18 min read
A Brief Discussion on Remote Component Loading Solutions for Low‑Code Platforms
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 11, 2022 · Frontend Development

Manual and Automatic Code Splitting in Webpack: Principles, Configuration, and Practice

This article explains how to reduce bundle size in Webpack by manually extracting common libraries into DLLs and configuring automatic code splitting with SplitChunksPlugin, detailing the underlying principles, configuration files, and practical examples using jQuery and Lodash to achieve up to 50% size reduction.

Code Splittingdlloptimization
0 likes · 17 min read
Manual and Automatic Code Splitting in Webpack: Principles, Configuration, and Practice
Sohu Tech Products
Sohu Tech Products
Jun 22, 2022 · Frontend Development

Comprehensive Guide to React Server-Side Rendering (SSR) with Code Examples

This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.

Node.jsReactRedux
0 likes · 30 min read
Comprehensive Guide to React Server-Side Rendering (SSR) with Code Examples
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
Tencent Cloud Developer
Tencent Cloud Developer
Jun 15, 2022 · Frontend Development

Webpack Core Principles and Code Splitting: From CommonsChunkPlugin to SplitChunksPlugin

Covering webpack’s evolution from early module systems to modern code‑splitting, the article explains core concepts—entries, loaders, plugins, and chunks—then contrasts the deprecated CommonsChunkPlugin with the heuristic‑driven SplitChunksPlugin, offering configuration tips and best practices for efficient vendor, async, and route‑based bundling.

Build OptimizationCode Splittingcommons-chunk-plugin
0 likes · 21 min read
Webpack Core Principles and Code Splitting: From CommonsChunkPlugin to SplitChunksPlugin
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
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Jun 3, 2022 · Frontend Development

Key Frontend Topics: Promises, Code Review, Race Conditions, Standards, Webpack

Explore a curated set of frontend development articles covering the evolution of asynchronous JavaScript with Promises and async/await, best practices for code reviews, handling race conditions in React, establishing comprehensive frontend standards, the quirks of JavaScript's with statement, and advanced webpack splitChunks and manifest optimization techniques.

AsynchronousCode reviewfrontend
0 likes · 4 min read
Key Frontend Topics: Promises, Code Review, Race Conditions, Standards, Webpack
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 27, 2022 · Frontend Development

How We Cut CodeSandbox Sandbox Build Time from 2 Minutes to 1 Second

This article details the background, architecture, and step‑by‑step performance optimizations—including Packager caching, request reduction, Service‑Worker caching, and Webpack‑style externals—that reduced a CodeSandbox sandbox build from around two minutes to roughly one second.

CodeSandboxFrontend BuildService Worker
0 likes · 23 min read
How We Cut CodeSandbox Sandbox Build Time from 2 Minutes to 1 Second
DaTaobao Tech
DaTaobao Tech
May 26, 2022 · Frontend Development

Measuring JavaScript Code Coverage and Reducing Dead Code in Front‑end Projects

By using Chrome DevTools and Istanbul/NYC to measure JavaScript coverage, developers can detect dead and low‑usage code, then convert such modules into dynamic imports via build plugins, enabling tree‑shaking and code‑splitting that reduces bundle size and speeds up first‑screen rendering.

Dead CodeInstrumentationTree Shaking
0 likes · 11 min read
Measuring JavaScript Code Coverage and Reducing Dead Code in Front‑end Projects
政采云技术
政采云技术
May 24, 2022 · Frontend Development

An Overview of Module Federation

This article introduces Webpack 5's Module Federation feature, explains its business scenarios, configuration, underlying plugin architecture, and runtime mechanics, provides a practical Vue 3 demo with code snippets, and discusses usage patterns and benefits for micro‑frontend development.

JavaScriptModule FederationVue3
0 likes · 13 min read
An Overview of Module Federation
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
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 13, 2022 · Frontend Development

How to Choose the Right CSS Strategy for a React Component Library

This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.

CSSCSS-in-JSComponent Library
0 likes · 21 min read
How to Choose the Right CSS Strategy for a React Component Library
Alibaba Terminal Technology
Alibaba Terminal Technology
May 10, 2022 · Frontend Development

Unlock Seamless Code Sharing with Webpack 5 Module Federation

This article explains how Webpack 5's Module Federation feature enables dynamic code sharing and dependency sharing across micro‑frontend applications, walks through its core concepts, shows practical configuration and code examples, and discusses its advantages, drawbacks, and typical use cases.

Dependency SharingModule Federationcode sharing
0 likes · 32 min read
Unlock Seamless Code Sharing with Webpack 5 Module Federation
Baidu Geek Talk
Baidu Geek Talk
Apr 29, 2022 · Frontend Development

Building a Scalable Micro‑Frontend Architecture with Tangram‑SDK

This article details how the iFanFan team transformed a monolithic Vue front‑end into a micro‑frontend system using a unified CLI tool, covering routing, packaging, independent development, version management, isolation, communication, CI/CD integration, multi‑product support, and performance optimizations.

CLI toolFrontend ArchitectureVue
0 likes · 12 min read
Building a Scalable Micro‑Frontend Architecture with Tangram‑SDK
ByteFE
ByteFE
Apr 8, 2022 · Backend Development

Curated Technical Articles: Backend, Frontend, and Development Insights

This collection highlights a free ByteDance backend training camp, alternatives to web frameworks, Node.js architecture, Flutter performance tricks, an underrated Deno overview, Chrome 100 updates, transitional architecture concepts, a Koa2 signaling server tutorial, a detailed Webpack component library guide, and a comprehensive comparison of npm, npx, cnpm, yarn, and pnpm.

BackendDenonodejs
0 likes · 5 min read
Curated Technical Articles: Backend, Frontend, and Development Insights
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
ELab Team
ELab Team
Mar 24, 2022 · Frontend Development

From JSP to Snowpack: Tracing the Evolution of Front‑End Engineering

This article chronicles the history of front‑end engineering—from the early stone‑age JSP/PHP era through Maven, Grunt, Webpack, and Snowpack—highlighting key tools, code examples, and future trends that have shaped modern front‑end development practices.

Engineeringbuild-toolsmaven
0 likes · 12 min read
From JSP to Snowpack: Tracing the Evolution of Front‑End Engineering
ELab Team
ELab Team
Mar 4, 2022 · Frontend Development

Understanding Source Maps: How to Debug Minified JavaScript

This article explains what source maps are, how they map compressed JavaScript back to original source files, the structure and version history of source map files, and provides practical examples and code snippets to help developers debug minified code effectively.

build toolsdebuggingsource map
0 likes · 12 min read
Understanding Source Maps: How to Debug Minified JavaScript