Bundle Size Optimization

作者 aj-geddes3f5182cfd739無授權條款355 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 個月前更新

Reduce JavaScript and CSS bundle sizes through code splitting, tree shaking, and optimization techniques. Improve load times and overall application performance.

AI 產生的概覽

指導透過程式碼分割、搖樹最佳化與分析來縮小 JavaScript 與 CSS 打包體積。

功能
此技能提供縮小 JavaScript 與 CSS 打包體積的指引,方法包括程式碼分割、搖樹最佳化及其他最佳化技巧。內容涵蓋使用 webpack-bundle-analyzer、Source Map Explorer 等工具分析打包組成、解讀體積指標,並提出實作策略。技能附有參考文件與一個元件範本,但不含指令碼。
適用情境
適用於最佳化建置流程、部署前分析打包體積、改善效能基準、關注行動裝置效能,或新增相依套件之後。
執行需求
無需指令碼或執行環境相依性,僅為說明與參考文件。文中討論 webpack-bundle-analyzer、Source Map Explorer、Bundle Buddy 與 Bundlephobia 等打包分析工具,但執行此技能並不需要它們。

Bundle Size Optimization

Table of Contents

Overview

Smaller bundles download faster, parse faster, and execute faster, dramatically improving perceived performance especially on slower networks.

When to Use

  • Build process optimization
  • Bundle analysis before deployment
  • Performance baseline improvement
  • Mobile performance focus
  • After adding new dependencies

Quick Start

Minimal working example:

javascript
// Analyze bundle composition
class BundleAnalysis {  analyzeBundle() {    return {      tools: [        "webpack-bundle-analyzer",        "Source Map Explorer",        "Bundle Buddy",        "Bundlephobia",      ],      metrics: {        total_size: "850KB gzipped",        main_js: "450KB",        main_css: "120KB",        vendor: "250KB",        largest_lib: "moment.js (67KB)",      },      breakdown: {        react: "85KB (10%)",        lodash: "45KB (5%)",        moment: "67KB (8%)",        other: "653KB (77%)",      },    };// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Bundle Analysis [blocked]Bundle Analysis
Optimization Techniques [blocked]Optimization Techniques
Implementation Strategy [blocked]Implementation Strategy
Best Practices [blocked]Best Practices

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values

來源與署名

來源:aj-geddes/useful-ai-prompts位於skills/bundle-size-optimization提交3f5182c

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架