Tagged articles

50 articles

Page 1 of 1

Feb 5, 2026 · Frontend Development

How vercel-react-best-practices Reduces React First‑Paint from 3.2s to 1.8s

This article analyzes the Vercel‑provided vercel-react-best-practices skill—installed weekly by 74.5K users—detailing its 57 optimization rules across eight priority categories, and demonstrates through real‑world case studies how it cuts first‑paint time from 3.2 seconds to 1.8 seconds, shrinks JavaScript bundle size, and improves conversion rates, while also covering installation, configuration, and advanced usage tips.

Bundle AnalyzerCode SplittingNext.js

0 likes · 21 min read

How vercel-react-best-practices Reduces React First‑Paint from 3.2s to 1.8s

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

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

Sohu Tech Products

May 7, 2025 · Frontend Development

10 Proven React Performance Hacks to Handle 3M+ Users

This article outlines ten concrete React optimization techniques—including lazy loading, image compression, memoization, code splitting, CDN usage, API throttling, server‑side rendering, WebSockets, minification, and load testing—demonstrating how each step dramatically improves performance and scalability for traffic spikes exceeding three million concurrent users.

Code SplittingLoad TestingReact

0 likes · 6 min read

10 Proven React Performance Hacks to Handle 3M+ Users

IT Services Circle

Jan 26, 2025 · Frontend Development

Understanding Code Splitting in Next.js and How It Improves Performance

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.

Code SplittingNext.jsdynamic import

0 likes · 8 min read

Understanding Code Splitting in Next.js and How It Improves Performance

Rare Earth Juejin Tech Community

Jan 9, 2025 · Frontend Development

Comprehensive Guide to Vite Configuration: Aliases, Plugins, Environment Variables, Build Optimizations, and Code Splitting

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.

Build ToolCode SplittingConfiguration

0 likes · 17 min read

Comprehensive Guide to Vite Configuration: Aliases, Plugins, Environment Variables, Build Optimizations, and Code Splitting

Sohu Tech Products

Nov 27, 2024 · Frontend Development

Optimizing React Applications with Code Splitting and Dynamic Imports

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.

Code SplittingPerformance OptimizationReact

0 likes · 9 min read

Optimizing React Applications with Code Splitting and Dynamic Imports

Huolala Tech

Nov 6, 2024 · Frontend Development

How We Cut WeChat Mini‑Program Startup Time by 45% with Smart Async Splitting

This article details how the Huolala team tackled growing performance problems in their WeChat mini‑program—such as long startup, page‑switch lag, and increasing bundle size—by measuring key metrics, setting aggressive targets, and applying a series of optimizations including performance data reporting, code‑splitting, async component loading, and skeleton screens, ultimately achieving significant reductions in launch and transition times while keeping the main bundle size under control.

Async SplittingCode SplittingWeChat Mini Program

0 likes · 24 min read

How We Cut WeChat Mini‑Program Startup Time by 45% with Smart Async Splitting

Soul Technical Team

Sep 30, 2024 · Mobile Development

Implementing Dynamic Code Splitting and Hot Updates in React Native with Metro Bundler

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.

Code SplittingHot UpdateMetro bundler

0 likes · 17 min read

Implementing Dynamic Code Splitting and Hot Updates in React Native with Metro Bundler

Rare Earth Juejin Tech Community

Jul 28, 2024 · Frontend Development

Performance Optimization of a Vue2 + ElementUI Cloud Management Platform

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.

Code SplittingLighthousePerformance Optimization

0 likes · 11 min read

Performance Optimization of a Vue2 + ElementUI Cloud Management Platform

Sohu Tech Products

Jul 24, 2024 · Frontend Development

Speed Up Flutter Web Startup: Split main.dart.js with Deferred Components

This article explains how to reduce Flutter Web startup time by splitting the bulky main.dart.js file using deferred components, configuring CanvasKit assets via CDN, and optimizing font loading, complete with step‑by‑step code examples and performance measurements.

CDNCode SplittingDeferred Components

0 likes · 19 min read

Speed Up Flutter Web Startup: Split main.dart.js with Deferred Components

HelloTech

Jun 19, 2024 · Frontend Development

WeChat Mini Program Package Size and Performance Optimization Strategies

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.

Code SplittingPackage Size OptimizationResource Management

0 likes · 16 min read

WeChat Mini Program Package Size and Performance Optimization Strategies

Goodme Frontend Team

Jan 22, 2024 · Frontend Development

How to Shrink Taro Mini‑Program Bundles Below 2 MB with Smart Splitting

This article explains four practical techniques—page sub‑packaging, shared module sub‑packaging, Babel‑based import path rewriting, and image asset offloading—to reduce a Taro mini‑program’s main bundle below the 2 MB limit, detailing the underlying MiniSplitChunksPlugin implementation, configuration steps, and code snippets.

Code SplittingTarobabel

0 likes · 14 min read

How to Shrink Taro Mini‑Program Bundles Below 2 MB with Smart Splitting

JD Retail Technology

Dec 20, 2023 · Frontend Development

JD Shopping Mini Program Performance Optimization: Practices and Results

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.

Code SplittingLoading SpeedMini Program

0 likes · 10 min read

JD Shopping Mini Program Performance Optimization: Practices and Results

Snowball Engineer Team

Oct 20, 2023 · Mobile Development

React Native Bundle Splitting and Incremental Loading Strategy at Snowball

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.

Bundle SplittingCode SplittingHot Update

0 likes · 23 min read

React Native Bundle Splitting and Incremental Loading Strategy at Snowball

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

JD Tech

Jun 21, 2023 · Frontend Development

Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

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.

Code SplittingFrontend Architecturemicro-app

0 likes · 15 min read

Micro Frontend: Research, Introduction, Capabilities, Core Concepts, Platform Selection, Implementation, and Summary

JD Retail Technology

May 5, 2023 · Frontend Development

Micro Frontend Architecture: Research, Design, and Implementation Guide

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.

Code SplittingFrontend Architecturemicro-app

0 likes · 12 min read

Micro Frontend Architecture: Research, Design, and Implementation Guide

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

ByteDance Web Infra

Dec 16, 2022 · Frontend Development

Understanding React 18 Streaming SSR and Selective Hydration

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.

Code SplittingReactSelective Hydration

0 likes · 25 min read

Understanding React 18 Streaming SSR and Selective Hydration

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

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

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

Baidu Geek Talk

Dec 1, 2021 · Frontend Development

When to Adopt Micro Frontends: System Requirements, Design Guidelines, and Performance Tips

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.

Code SplittingFrontend ArchitectureMicro Frontends

0 likes · 15 min read

When to Adopt Micro Frontends: System Requirements, Design Guidelines, and Performance Tips

Xueersi Online School Tech Team

Nov 19, 2021 · Frontend Development

Introduction, Architecture, and Practical Usage of the qiankun Micro‑Frontend Framework

This article provides a comprehensive overview of the qiankun micro‑frontend framework—including its background, core concepts of micro‑frontends, comparison with other solutions, detailed configuration examples for host and child applications, implementation details such as sandbox mechanisms, common pitfalls, and the overall impact on development efficiency and project complexity.

Code SplittingFrontend ArchitectureVue

0 likes · 24 min read

Introduction, Architecture, and Practical Usage of the qiankun Micro‑Frontend Framework

Ctrip Technology

Aug 5, 2021 · Frontend Development

Understanding React Server Components: Concepts, Usage, and Implementation

This article explains the motivation, component types, naming conventions, runtime mechanism, streaming protocol, design goals, and practical considerations of React Server Components, illustrating how they reduce client bundle size and enable progressive server‑side rendering with code examples.

Code SplittingReactSSR

0 likes · 15 min read

Understanding React Server Components: Concepts, Usage, and Implementation

Tencent IMWeb Frontend Team

Jul 15, 2021 · Frontend Development

How We Cut Mini‑Program Startup Time by 45%: Real‑World Performance Tactics

This article details a systematic investigation of a WeChat Mini Program’s slow startup, request, and interaction performance, presents data‑driven diagnostics, and outlines concrete optimizations—code‑size reduction, CDN static assets, independent sub‑packages, data prefetch, request queuing, and stepwise rendering—that together reduced package size by 27%, startup time by up to 45%, and request latency by over 80%, delivering a noticeably smoother user experience.

Code SplittingData PrefetchPerformance Optimization

0 likes · 19 min read

How We Cut Mini‑Program Startup Time by 45%: Real‑World Performance Tactics

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

ELab Team

Jun 23, 2021 · Frontend Development

Why Micro Frontends Are Changing Large-Scale Frontend Architecture

This article explains how micro frontends, inspired by micro‑service principles, break down monolithic front‑end applications into independent sub‑applications, covering design motivations, practical implementation steps, sandbox isolation techniques, and code examples to improve maintainability and performance.

Code SplittingFrontend ArchitectureModule Federation

0 likes · 14 min read

Why Micro Frontends Are Changing Large-Scale Frontend Architecture

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

vivo Internet Technology

Mar 10, 2021 · Frontend Development

Performance Optimization Strategies for a WeChat Mini‑Program Serving Vivo Offline Agents

The article details how the C‑end User Mini‑Program for Vivo offline agents was optimized to meet strict performance targets—reducing startup time, white‑screen duration, rendering latency, and memory usage—through code trimming, sub‑packaging, CDN assets, data caching, skeleton screens, and efficient setData handling, achieving faster loads and smoother interaction.

Code SplittingMemory ManagementPerformance Optimization

0 likes · 13 min read

Performance Optimization Strategies for a WeChat Mini‑Program Serving Vivo Offline Agents

Sohu Tech Products

Dec 2, 2020 · Frontend Development

Understanding Webpack Asynchronous Loading and Code Splitting Strategies

This article explains how Webpack's asynchronous loading mechanisms such as require.ensure and dynamic import() work, demonstrates practical examples for splitting bundles, discusses route lazy‑loading in Vue, and provides optimization techniques including splitChunks, CDN externals, and bundle analysis to improve frontend performance.

Code SplittingImportVue lazy loading

0 likes · 13 min read

Understanding Webpack Asynchronous Loading and Code Splitting Strategies

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)

WecTeam

Mar 26, 2020 · Frontend Development

Boost WeChat Mini Program Performance: Proven Strategies & Metrics

This article details comprehensive techniques for optimizing the performance of WeChat Mini Programs, covering metrics definition, Taro framework usage, code and asset reduction, rendering improvements, memory management, and real‑world results from the 京喜 homepage, providing actionable guidance for developers.

Code SplittingPerformance OptimizationTaro

0 likes · 39 min read

Boost WeChat Mini Program Performance: Proven Strategies & Metrics

Taobao Frontend Technology

Mar 25, 2020 · Frontend Development

Boost Web Performance with Code Splitting: Practical Guide & Tips

This article explains why reducing initial load resources is crucial for web performance, shows how to measure code utilization with Chrome DevTools, and provides detailed guidance on static and dynamic code splitting, magic comments, and webpack configurations to create faster, smoother front‑end applications.

Code SplittingWeb Optimizationfrontend performance

0 likes · 10 min read

Boost Web Performance with Code Splitting: Practical Guide & Tips

WecTeam

Dec 3, 2019 · Frontend Development

How to Cure Your JavaScript Hangover: Practical Front‑End Performance Fixes

This article explains why a newly rebuilt site can suffer a “JavaScript hangover,” then walks through concrete front‑end performance techniques—including tree shaking, code splitting, externalizing third‑party scripts, smaller library choices, differential serving, and reducing Babel‑generated bloat—to restore speed and improve user experience.

Code SplittingFrontend OptimizationJavaScript

0 likes · 17 min read

How to Cure Your JavaScript Hangover: Practical Front‑End Performance Fixes

WecTeam

Sep 10, 2019 · Frontend Development

Deploy Native JavaScript Modules in Production: Best Practices & Performance Gains

This article explains how modern browsers now support native ES2015 modules, why earlier performance concerns were based on outdated tests, and provides detailed guidance on using Rollup, code‑splitting, dynamic imports, modulepreload, and polyfills to achieve faster, smaller, and future‑proof web applications.

Code SplittingESModulesJavaScript

0 likes · 21 min read

Deploy Native JavaScript Modules in Production: Best Practices & Performance Gains

UC Tech Team

Jan 16, 2019 · Frontend Development

How to Analyze and Reduce Your JavaScript Bundle Size with DevTools, Lighthouse, and Webpack Bundle Analyzer

This article explains how front‑end developers can analyze and shrink their JavaScript bundles by using Chrome DevTools, Lighthouse’s unused‑code audit, and visual tools such as Webpack Bundle Analyzer, and provides practical tips for removing unused or unnecessary libraries.

Code SplittingLighthousebundle-analysis

0 likes · 6 min read

How to Analyze and Reduce Your JavaScript Bundle Size with DevTools, Lighthouse, and Webpack Bundle Analyzer

Qunar Tech Salon

Dec 26, 2018 · Frontend Development

Using React.lazy and Suspense for Code Splitting and Lazy Loading

This article explains how React 16.6 introduced React.lazy and Suspense to simplify component code splitting and lazy loading, discusses why code splitting is needed, demonstrates dynamic import() usage, compares React-loadable with the built‑in APIs, and shows advanced patterns such as nested Suspense boundaries.

Code SplittingReactReact.lazy

0 likes · 9 min read

Using React.lazy and Suspense for Code Splitting and Lazy Loading

Ctrip Technology

Dec 6, 2018 · Frontend Development

Implementing Lazy Loading in React: Techniques, Components, and Higher‑Order Functions

This article explains why lazy loading is needed for React front‑end projects, demonstrates several code‑first implementations—including a custom LazyComponent, prop‑forwarding tricks, and a higher‑order lazy() function—showing how to improve first‑screen rendering while handling state updates correctly.

Code SplittingComponentReact

0 likes · 7 min read

Implementing Lazy Loading in React: Techniques, Components, and Higher‑Order Functions

UC Tech Team

Nov 1, 2018 · Frontend Development

Web Performance Optimization: Lessons from the Oodles Theater App

This article walks through practical web performance optimization techniques—such as removing unused resources, effective caching, code splitting, image compression, lazy loading, and resource hints—demonstrated on the Oodles Theater demo app, showing how Lighthouse audits guide measurable improvements.

Code SplittingLighthouseimage-optimization

0 likes · 23 min read

Web Performance Optimization: Lessons from the Oodles Theater App

Yuewen Frontend Team

Sep 14, 2018 · Frontend Development

Master Long-Term Caching and Code Splitting to Supercharge Your Webpack Builds

This article explains how to improve web application performance by leveraging persistent caching with proper cache‑control headers, versioning bundles using hash‑based filenames, extracting dependencies and runtime into separate chunks, inlining runtime scripts, applying lazy loading with dynamic imports, splitting code by routes or pages, and stabilizing module IDs with hashed IDs, all using webpack configurations for both version 3 and 4.

Code Splittingcachingfrontend

0 likes · 20 min read

Master Long-Term Caching and Code Splitting to Supercharge Your Webpack Builds

Tencent Music Tech Team

Jun 8, 2018 · Frontend Development

Optimizing Vue/Vuetify Projects with Webpack: Code Splitting, CommonsChunkPlugin, and Externals

By using Webpack’s CommonsChunkPlugin to extract node_modules into a vendor chunk, configuring externals to load Vue and Vuetify from a CDN, and converting non‑critical components to async imports, a Vuetify‑based app reduces its first‑screen bundle by hundreds of kilobytes, improves caching, and speeds initial load.

Code SplittingPerformance OptimizationVue

0 likes · 11 min read

Optimizing Vue/Vuetify Projects with Webpack: Code Splitting, CommonsChunkPlugin, and Externals

JD Tech

Apr 27, 2018 · Frontend Development

Redesigning JD.com Homepage: Architecture, Performance, and Frontend Engineering with Nerv and Athena

This article recounts the four‑month redesign of JD.com’s homepage, detailing the migration from jQuery + SeaJS to the Nerv framework, the introduction of the Athena engineering platform, performance and experience optimizations such as code splitting, lazy loading, IE8 compatibility, and the monitoring and automation practices that ensure stability and scalability.

Code Splittingathenafrontend

0 likes · 24 min read

Redesigning JD.com Homepage: Architecture, Performance, and Frontend Engineering with Nerv and Athena

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

QQ Music Frontend Team

Apr 7, 2018 · Frontend Development

Master Webpack Code Splitting to Speed Up Vue Applications

This article explains how to improve front‑end performance by separating business code from libraries, using on‑demand async loading, configuring CommonsChunkPlugin, externalizing large dependencies, and applying HTTP/2 optimizations, all demonstrated with a real Vue/Vuetify project.

Code SplittingVueperformance

0 likes · 11 min read

Master Webpack Code Splitting to Speed Up Vue Applications

21CTO

Mar 4, 2018 · Frontend Development

How to Keep Large SPAs Fast: 6 Proven Performance Strategies

This article explores the performance challenges of large Single Page Applications and presents six practical optimization techniques—including fast startup, route-based code splitting, shared bundle extraction, component preloading, ESM tree‑shaking, and PWA caching—to maintain a smooth user experience while keeping bundle sizes low.

Code SplittingPWAPerformance Optimization

0 likes · 7 min read

How to Keep Large SPAs Fast: 6 Proven Performance Strategies

Tencent IMWeb Frontend Team

Dec 12, 2017 · Frontend Development

Optimizing a Vue.js Internal Ops System: From Tech Stack to Build Strategies

This article details the design and implementation of Tencent Cloud's internal YY‑DSA operations platform, covering project background, frontend technology selection (Vue.js, Element‑UI, webpack), project structure, development environment, build optimizations such as code splitting, CommonsChunk, and the comparison of Dll versus externals for faster builds.

Build OptimizationCode SplittingVue.js

0 likes · 23 min read

Optimizing a Vue.js Internal Ops System: From Tech Stack to Build Strategies

Qunar Tech Salon

Apr 23, 2017 · Frontend Development

Performance Optimizations in Twitter Lite: Code Splitting, Rendering, Images, Redux, and Service Workers

This article explains how Twitter Lite, one of the world’s largest React.js PWAs, eliminates a range of performance bottlenecks through route‑based code splitting, avoiding frame‑dropping functions, using smaller images, optimizing React lifecycle methods, improving Redux updates, and leveraging Service Workers for faster asset delivery.

Code SplittingPWAReact

0 likes · 19 min read

Performance Optimizations in Twitter Lite: Code Splitting, Rendering, Images, Redux, and Service Workers

Tencent Music Tech Team

Jul 29, 2016 · Frontend Development

Advanced Webpack Configuration Techniques and Tips

The article presents advanced Webpack configuration strategies—including programmatic Node‑API builds, streamlined loader setups, global module injection and environment definitions, commons chunk extraction, DLL bundling, on‑demand code splitting, UglifyJS minification, and server‑side bundling—to help developers efficiently manage complex projects.

Code SplittingConfigurationJavaScript

0 likes · 12 min read

Advanced Webpack Configuration Techniques and Tips