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.

仅含说明Software Development

AI 生成的概览

指导通过代码分割、摇树优化和分析来减小 JavaScript 与 CSS 打包体积。

功能: 该技能提供缩小 JavaScript 和 CSS 打包体积的指导，方法包括代码分割、摇树优化及其他优化技术。内容涵盖使用 webpack-bundle-analyzer、Source Map Explorer 等工具分析打包组成、解读体积指标，并给出实施策略。技能附带参考文档和一个组件模板，但不包含脚本。
适用场景: 适用于优化构建流程、部署前分析打包体积、改善性能基线、关注移动端性能，或新增依赖之后。
运行要求: 无需脚本或运行时依赖，仅为说明与参考文档。文中讨论了 webpack-bundle-analyzer、Source Map Explorer、Bundle Buddy 和 Bundlephobia 等打包分析工具，但运行该技能并不需要它们。

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)

// 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:

Guide	Contents
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 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

Bundle Size Optimization

Bundle Size Optimization

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices