0 views collected around this technical thread.
This article explains the concept of code splitting in Next.js, describes how automatic page-level splitting and dynamic imports reduce initial bundle size, and provides practical code examples that demonstrate improved load times and better user experience for modern web applications.
This article provides a detailed walkthrough of Vite's configuration options, covering development server setup, path aliasing, TypeScript support, plugin integration, environment variable handling, CSS pre‑processor settings, dependency pre‑bundling, production build tweaks, and advanced code‑splitting strategies for modern frontend projects.
By using code splitting and dynamic imports, React developers can break large bundles into on‑demand chunks—loading only needed libraries, components, or routes after user actions—thereby shrinking initial download size, speeding up first render, and delivering a more responsive, scalable application.
This article explains how to analyze React Native bundle contents, customize Metro's module ID generation to achieve stable code splitting, and integrate the resulting base and feature packages with a hot‑update workflow that preloads the base bundle, loads feature bundles on demand, and handles loading failures on iOS.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.
To keep a WeChat mini‑program under the 2 MB limit and improve both startup and runtime performance, the article proposes splitting the main bundle into async sub‑packages, removing unused code, pre‑fetching data, using on‑demand imports, and implementing a backend‑driven size‑control and CI release gate.
This article details how JD's massive‑scale shopping mini program achieved a two‑fold performance boost through systematic front‑end optimizations—including code‑package reduction, independent sub‑packages, async loading, pre‑download, selective code injection, first‑screen rendering tricks, and release‑frequency management—providing practical guidance for developers targeting large‑user bases.
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.
This article details how JD Shopping mini program improved launch speed and user retention by applying code‑splitting, asynchronous sub‑packages, lazy component injection, reduced synchronous API calls, first‑screen rendering tricks, data prefetching, caching, and smarter version release strategies.
This article describes Snowball's evolution from a single React Native bundle to a multi‑bundle, code‑splitting architecture that reduces bundle size by 70%, shortens load time by 65%, and enables flexible, incremental updates through Metro‑based split‑packages and LRU engine caching.
This article introduces a highly customizable Webpack plugin and React component preloading solution that combines code splitting, lazy loading, and proactive resource prefetching to dramatically reduce first‑screen load size and eliminate runtime loading delays, especially for large module‑federated components.
This article explains the concept of micro frontends, outlines a four‑step adoption process, compares architectural options, describes core capabilities and platforms such as single‑spa, qiankun and micro‑app, and shares practical implementation tips and common pitfalls for large‑scale projects.
This article explains the concept of micro frontends, outlines a systematic research and design process, compares architectural options, and provides detailed implementation steps with code examples using frameworks like single-spa, qiankun, and micro‑app to build scalable, maintainable large‑scale projects.
This article explains the purpose of a component library, outlines how to plan, select a framework, set up Vant CLI, configure scripts, organize directories, add and test components, publish to an npm registry, and integrate the library into projects using various import methods.
React 18 introduces Streaming SSR, allowing the server to send HTML in chunks and perform selective hydration, which improves performance by rendering ready sections early and handling asynchronous components via Suspense, with detailed examples of code implementation, error handling, and JS/CSS integration.
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.
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.
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.
Adopt micro frontends when large, parallel development teams need independent releases, cross‑technology migration, or high‑frequency updates, and design them with a central app shell loading shared dependencies, choosing between iframe, web component, or lifecycle‑hook bundles, managing single‑ or multi‑instance routing, shared state or event‑bus communication, and optimizing performance through lazy rendering and shared library bundling.