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

What’s New in Rspack 1.6? Explore Enhanced Tree Shaking, Import Defer, and Faster Builds

Rspack 1.6 is officially released, bringing enhanced tree shaking for dynamic imports, native support for the import defer syntax, a new experimental EsmLibraryPlugin for cleaner ESM bundles, default barrel optimization, stable layer handling, JSX preservation, source‑map extraction, significant performance gains, and a host of updates across the Rstack ecosystem such as Rsbuild, Rspress, Rslib, Rstest and Rsdoctor.

ESM optimizationRspackTree Shaking
0 likes · 16 min read
What’s New in Rspack 1.6? Explore Enhanced Tree Shaking, Import Defer, and Faster Builds
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 31, 2025 · Frontend Development

Master Front-End Performance: Load, Run, Build, and Network Optimizations

This article systematically explores front‑end performance optimization across loading, runtime, build, and network stages, offering practical techniques such as resource compression, code splitting, tree shaking, CDN acceleration, render‑blocking reduction, lazy loading, Web Workers, and monitoring tools to dramatically improve page speed and user experience.

Code SplittingTree ShakingWeb Optimization
0 likes · 19 min read
Master Front-End Performance: Load, Run, Build, and Network Optimizations
JavaScript
JavaScript
Aug 24, 2025 · Frontend Development

Why Top Frontend Teams Ban `export default` and Prefer Named Exports

The article explains why many large‑scale front‑end teams discourage the use of JavaScript's `export default` in favor of named exports, citing benefits for naming consistency, tree‑shaking efficiency, and simpler module re‑exports in long‑term projects.

ES ModulesJavaScriptTree Shaking
0 likes · 4 min read
Why Top Frontend Teams Ban `export default` and Prefer Named Exports
大转转FE
大转转FE
Aug 11, 2025 · Frontend Development

Frontend Weekly: AI‑Driven Efficiency, Tree Shaking Deep Dive, and Code Refactoring

This newsletter curates five technical articles covering AI‑enhanced frontend productivity, a comparative deep dive into tree shaking across major bundlers, innovative AI code generation for e‑commerce frontends, a rapid AI‑assisted component refactor, and efficiency gains in ad‑monitoring development.

AICode GenerationTree Shaking
0 likes · 4 min read
Frontend Weekly: AI‑Driven Efficiency, Tree Shaking Deep Dive, and Code Refactoring
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
Instant Consumer Technology Team
Instant Consumer Technology Team
Jul 22, 2025 · Frontend Development

What’s New in Frontend Tech? Deno, ECharts, Monorepo, Tree Shaking & More

Explore the latest frontend breakthroughs, from Deno 2.4’s revived bundle command and Apache ECharts 6.0’s visual upgrades to the JS1024 code‑golf challenge, PNG spec overhaul, a comprehensive monorepo guide, practical Web Components tips, tree‑shaking pitfalls, and an in‑depth look at TypeScript declaration merging.

DenoEChartsMonorepo
0 likes · 4 min read
What’s New in Frontend Tech? Deno, ECharts, Monorepo, Tree Shaking & More
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
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
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
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 2, 2022 · Frontend Development

How to Analyze and Optimize Frontend Bundle Size with a DIY JS Parser

This article walks through measuring bundle growth, identifying duplicate dependencies and missing tree‑shaking, building a Go‑based JavaScript parser, generating a dependency graph, handling conditional imports, applying dead‑code elimination, and finally using the tool to shrink frontend bundle size.

Tree Shakingbundledead code elimination
0 likes · 35 min read
How to Analyze and Optimize Frontend Bundle Size with a DIY JS Parser
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
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
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
ByteFE
ByteFE
Aug 31, 2021 · Frontend Development

Understanding Tree Shaking in Webpack: Theory, Implementation, and Best Practices

This article explains the concept of Tree Shaking as a dead‑code elimination technique based on ES Modules, details how to enable it in Webpack, describes the underlying implementation steps, and provides practical tips for writing tree‑shakable code while avoiding common pitfalls.

ESMTree Shakingdead code elimination
0 likes · 14 min read
Understanding Tree Shaking in Webpack: Theory, Implementation, and Best Practices
Alibaba Terminal Technology
Alibaba Terminal Technology
Aug 9, 2021 · Frontend Development

How Low‑Code Platforms Revolutionize Frontend Development with Component‑Driven Architecture

This article explores the evolution of low‑code building systems, detailing how component abstraction, NPM integration, bundless packaging, tree‑shaking, and version governance enable scalable, efficient frontend development while reducing reliance on specialized front‑end engineers.

Component ArchitectureTree Shakinglow-code
0 likes · 19 min read
How Low‑Code Platforms Revolutionize Frontend Development with Component‑Driven Architecture
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jun 9, 2021 · Frontend Development

How Rollup Packs JavaScript: Inside the Build Process and AST Analysis

This article explains Rollup’s core principles, compares it with Webpack, introduces prerequisite concepts such as magic‑string, AST and scope chains, and walks through the complete build workflow—including parsing, dependency analysis, statement expansion, and final code generation—using concrete code examples and diagrams.

ASTJavaScript bundlingTree Shaking
0 likes · 20 min read
How Rollup Packs JavaScript: Inside the Build Process and AST Analysis
ByteDance Dali Intelligent Technology Team
ByteDance Dali Intelligent Technology Team
Jun 7, 2021 · Frontend Development

Understanding Webpack 5 Compilation Process and Tapable Plugin System

This article explains the internal compilation mechanism of webpack 5.11.0, covering Tapable’s event system, the Compiler and Compilation lifecycle, module creation, parsing, resolving, rule compilation, generators, and tree‑shaking, with practical code examples illustrating how plugins and hooks operate.

TapableTree Shakingcompiler
0 likes · 13 min read
Understanding Webpack 5 Compilation Process and Tapable Plugin System
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Nov 16, 2020 · Frontend Development

Performance Optimization Practices for the XRN Platform (Web and React Native)

NetEase’s XRN platform boosts Web and React Native performance by eliminating duplicate bundles, pruning unused code, importing only needed polyfills, using dynamic imports and bundle splitting, pre‑loading assets, lazily loading images and lists, limiting first‑screen rendering, and applying memoization, raising Lighthouse scores from 50.3 to 80.4 and cutting RN load time by 40 %.

Code SplittingPerformance OptimizationReact Native
0 likes · 13 min read
Performance Optimization Practices for the XRN Platform (Web and React Native)
Xianyu Technology
Xianyu Technology
Nov 3, 2020 · Mobile Development

Exploring Flutter Tree Shaking Mechanism in the Engine

The article dissects Flutter’s tree‑shaking process within the engine—tracing the compilation pipeline from GenSnapshot through AOT phases, showing how unused methods and resources are identified, retained or discarded, and finally obfuscated, thereby enabling dead‑code elimination, smaller binaries, and seamless Flutter‑FaaS integration.

AOT compilationDARTFlutter
0 likes · 9 min read
Exploring Flutter Tree Shaking Mechanism in the Engine
Amap Tech
Amap Tech
Oct 30, 2020 · Frontend Development

Frontend Performance Optimization: Common Issues and Solutions for Large‑Scale Projects

Large‑scale front‑end projects suffer from oversized bundles, unnecessary listeners, deep cloning, and mutable state, causing latency and crashes; the article explains how to diagnose these problems with Chrome DevTools and Webpack tools and resolves them through bundle splitting, tree‑shaking, memoisation, immutable patterns, and caching.

ReactTree Shakingmutable-data
0 likes · 12 min read
Frontend Performance Optimization: Common Issues and Solutions for Large‑Scale Projects
JD Retail Technology
JD Retail Technology
Sep 3, 2020 · Frontend Development

Step‑by‑Step Guide to Building and Publishing a React Component Library with CRA, Docz, and Netlify

This article provides a comprehensive, step‑by‑step tutorial on creating, documenting, and publishing a React component library using create‑react‑app, TypeScript, docz, npm linking, and Netlify, covering configuration, build scripts, on‑demand loading, and deployment best practices.

Component LibraryDoczNetlify
0 likes · 21 min read
Step‑by‑Step Guide to Building and Publishing a React Component Library with CRA, Docz, and Netlify
JD Tech Talk
JD Tech Talk
Aug 19, 2020 · Frontend Development

Step‑by‑Step Guide to Building and Publishing a React Component Library with Create‑React‑App, Docz, and Netlify

This article provides a comprehensive, hands‑on tutorial for quickly creating a React component library using create‑react‑app, configuring TypeScript, ESLint, node‑sass, docz documentation, npm publishing, tree‑shaking, on‑demand loading, and deploying the generated docs to Netlify.

Component LibraryDoczNetlify
0 likes · 20 min read
Step‑by‑Step Guide to Building and Publishing a React Component Library with Create‑React‑App, Docz, and Netlify
Sohu Tech Products
Sohu Tech Products
Oct 30, 2019 · Frontend Development

Key Performance and API Improvements in Vue 3

Vue 3 introduces substantial performance gains, a smaller bundle size, tree‑shakable global APIs, a proxy‑based reactivity system, and experimental time‑slicing features, all of which make modern, mobile‑first web development faster and more efficient.

ProxyTree ShakingVue
0 likes · 10 min read
Key Performance and API Improvements in Vue 3
MaoDou Frontend Team
MaoDou Frontend Team
Aug 27, 2019 · Frontend Development

Why Choose Rollup? A Practical Guide to Bundling JavaScript Libraries

This article introduces Rollup as a modern JavaScript bundler, explains its advantages over CommonJS and Webpack, demonstrates quick-start commands for browsers, Node.js, and UMD formats, covers tree‑shaking with ES modules, and provides a complete TypeScript‑React library setup with configuration and publishing steps.

ES ModulesJavaScript bundlerReact
0 likes · 11 min read
Why Choose Rollup? A Practical Guide to Bundling JavaScript Libraries
JD Tech
JD Tech
Mar 5, 2019 · Frontend Development

Optimizing Taro H5 Bundle Size with Tree Shaking and ES Module Refactoring

This article explains how Taro's H5 build size was dramatically reduced by applying dead‑code elimination, configuring sideEffects, converting component and API packages to ES modules, and using webpack's tree‑shaking together with a custom Babel plugin to replace default imports with named imports.

Babel PluginES ModulesPerformance Optimization
0 likes · 11 min read
Optimizing Taro H5 Bundle Size with Tree Shaking and ES Module Refactoring