Tagged articles

16 articles

Page 1 of 1

Sep 8, 2025 · Frontend Development

How We Cut Log System Size by 70% with Smart Cleanup, Async Loading, and Build Optimizations

This article details how a modern frontend logging system was dramatically improved by implementing intelligent database cleanup, asynchronous module loading, dynamic JSZip imports, log queue throttling, and Rollup build‑time fixes, resulting in a much smaller bundle and smoother user experience.

Rollupasync loadingbundle optimization

0 likes · 13 min read

How We Cut Log System Size by 70% with Smart Cleanup, Async Loading, and Build Optimizations

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

Code Mala Tang

Mar 18, 2025 · Frontend Development

Why Importing Whole Libraries Bloats Your Bundle and How Wrapper Patterns Can Help

This article explains how importing entire libraries like lodash and Framer Motion can dramatically increase bundle size, demonstrates precise import techniques, introduces a wrapper pattern for better maintainability, and offers practical tips for choosing tree‑shakable libraries and tracking import sizes.

JavaScriptbundle optimizationfrontend

0 likes · 6 min read

Why Importing Whole Libraries Bloats Your Bundle and How Wrapper Patterns Can Help

DeWu Technology

Jun 5, 2024 · Mobile Development

iOS Bundle Size Optimization: Mach‑O Analysis and CocoaPods Integration

The article demonstrates how detailed Mach‑O and LinkMap analysis combined with custom CocoaPods hooks, Swift‑syntax refactoring, and indexed symbol mapping can systematically shrink an iOS app’s bundle—from 289.3 MB to 259.3 MB—while cutting CI build time and simplifying debugging.

CocoaPodsCode RefactoringLinkMap

0 likes · 19 min read

iOS Bundle Size Optimization: Mach‑O Analysis and CocoaPods Integration

ByteFE

Apr 23, 2024 · Game Development

Technical Overview of SAR Creator for Interactive Scene Development

This article provides a comprehensive guide to SAR Creator, a TypeScript‑based interactive solution used for building 2D/3D game scenes, covering workflow, asset creation, canvas adaptation, bundle splitting, texture compression, script lifecycle, dynamic loading, and configuration for ByteDance's Spring Festival activities.

Game DevelopmentPrefabSAR Creator

0 likes · 22 min read

Technical Overview of SAR Creator for Interactive Scene Development

Didi Tech

Jan 11, 2024 · Frontend Development

Mpx 2.9 Release: Atomic CSS Support, SSR Integration, and Bundle Size Optimizations

Mpx 2.9 adds built‑in atomic‑class (utility‑first) CSS, server‑side rendering for web output, and a suite of bundle‑size optimizations—including deterministic IDs, template compression, empty‑module removal, and render‑function pruning—while splitting atomic CSS into sub‑packages for mini‑programs and outlining a roadmap for further compile‑time reductions, Vite support, and cross‑platform extensions.

MpxSSRatomic CSS

0 likes · 24 min read

Mpx 2.9 Release: Atomic CSS Support, SSR Integration, and Bundle Size Optimizations

Baidu Geek Talk

Jul 31, 2023 · Mobile Development

Optimizing iOS App Bundle Size with HEIC Images and Unused Class Detection

The guide shows how to shrink a Baidu iOS app by converting PNGs to HEIC within Asset Catalogs—leveraging Xcode’s actool for compression, avoiding pngquant‑induced alpha issues, and employing combined static LinkMap/Mach‑O parsing and runtime isa‑flag checks to prune never‑instantiated classes.

Asset CatalogHEICUnused Class Detection

0 likes · 25 min read

Optimizing iOS App Bundle Size with HEIC Images and Unused Class Detection

NetEase Cloud Music Tech Team

Jun 30, 2022 · Mobile Development

Implementing Dynamic Imports in React Native: A Deep Dive into Metro Bundler

This article explains how to customize Metro bundler to support dynamic imports in React Native, detailing a split‑and‑combine build process that isolates async modules, deduplicates code, and loads bundles on demand, thereby shrinking app size and avoiding the drawbacks of multi‑business package architectures.

Code SplittingJavaScriptMetro bundler

0 likes · 14 min read

Implementing Dynamic Imports in React Native: A Deep Dive into Metro Bundler

ELab Team

Jul 7, 2021 · Frontend Development

How to Speed Up Webpack Builds: A Deep Dive into SplitChunksPlugin Optimization

This article explains why a large project’s Webpack bundle became painfully slow, walks through detailed bundle analysis, shows before‑and‑after configuration changes—including setting maxAsyncRequests—and explores the inner workings of SplitChunksPlugin, its default settings, attributes, execution flow, and chunk‑splitting strategy, providing code examples and diagrams for better understanding.

Code Splittingbundle optimizationsplitchunks

0 likes · 29 min read

How to Speed Up Webpack Builds: A Deep Dive into SplitChunksPlugin Optimization

WeDoctor Frontend Technology

Jun 27, 2021 · Frontend Development

How Webpack and Rollup Implement Tree-Shaking: A Deep Dive

This article compares the tree‑shaking mechanisms of Rollup and Webpack, explains the three stages Webpack uses (UglifyJS, BabelMinify, Terser), details side‑effects handling, configuration tips, and performance benchmarks, providing practical guidance for optimizing bundle size in modern JavaScript projects.

JavaScriptRollupUglifyJS

0 likes · 18 min read

How Webpack and Rollup Implement Tree-Shaking: A Deep Dive

Ctrip Technology

Apr 15, 2021 · Mobile Development

Optimizing React Native Bundle Size with the CRN Bundle Analysis Platform

This article explains how to analyze and reduce React Native bundle size using tools like react-native-bundle-visualizer and the custom CRN bundle analysis platform, covering library replacements, import optimizations, code splitting, static asset handling, and reporting a typical 50% size reduction.

Code SplittingESLintMobile Development

0 likes · 19 min read

Optimizing React Native Bundle Size with the CRN Bundle Analysis Platform

Qunar Tech Salon

Sep 19, 2019 · Frontend Development

How to Reduce Your Vue.js Bundle Size with Webpack

Jennifer Bland explains how to halve a Vue.js production bundle from 2.48 MB to 1.28 MB by using webpack-bundle-analyzer and applying targeted optimizations such as removing unused libraries, importing only needed lodash functions, aliasing moment, and configuring vuetify-loader to include only required components.

Vue.jsbundle optimizationlodash

0 likes · 9 min read

How to Reduce Your Vue.js Bundle Size with Webpack

GF Securities FinTech

Jul 5, 2019 · Frontend Development

Cut Frontend Bundle Size Using Webpack Analyzer and Babel

This article explains how to identify oversized JavaScript bundles with webpack‑bundle‑analyzer, split protobuf‑generated code into business‑specific modules, and apply Babel’s parser, traverse, types, and generator tools to automatically remove redundant commons code and restructure module patterns, dramatically reducing bundle size and improving frontend performance.

Protobufbabelbundle optimization

0 likes · 9 min read

Cut Frontend Bundle Size Using Webpack Analyzer and Babel

Snowball Engineer Team

Apr 27, 2018 · Frontend Development

Improving Front‑End Page Load Speed with Webpack SplitChunksPlugin and Code Splitting

The article explains how Webpack's SplitChunksPlugin enables effective code splitting for shared libraries and components, reducing initial bundle size, improving caching, and speeding up page loads, with practical configuration examples and usage tips from Snowball's front‑end architecture.

Code SplittingSplitChunksPluginbundle optimization

0 likes · 7 min read

Improving Front‑End Page Load Speed with Webpack SplitChunksPlugin and Code Splitting

Tencent IMWeb Frontend Team

Aug 31, 2017 · Frontend Development

How to Fine‑Tune Webpack Bundles for Faster Loads and Smaller Files

This article walks through analyzing Webpack bundle output, identifying oversized or duplicated modules, applying code‑splitting with async imports, and adjusting CommonsChunkPlugin settings to produce leaner, more cache‑friendly builds for traditional non‑SPA pages.

bundle optimizationcommonschunkpluginfrontend performance

0 likes · 7 min read

How to Fine‑Tune Webpack Bundles for Faster Loads and Smaller Files

Dada Group Technology

Apr 14, 2017 · Frontend Development

Babel Optimization: Solving Bundle Size and Performance Issues

This article explores how to optimize Babel usage to reduce bundle size and improve performance by addressing helper duplication, third-party module handling, and import optimization through transform-runtime, include patterns, and import transformation plugins.

JavaScriptTranspilationbabel

0 likes · 9 min read

Babel Optimization: Solving Bundle Size and Performance Issues