前端打包体积优化指南：使用Webpack分析工具减少JS/CSS文件大小，提升网站性能

bundle-size-optimization by aj-geddes/useful-ai-prompts

219 周安装量

162 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill bundle-size-optimization

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)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
打包分析	打包分析
优化技巧	优化技巧
实施策略	实施策略
最佳实践	最佳实践

🇺🇸English

Bundle Size Optimization

Overview
When to Use
Quick Start
Reference Guides
Best Practices

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:

// 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	Bundle Analysis
Optimization Techniques	Optimization Techniques
Implementation Strategy	Implementation Strategy
Best Practices	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

Weekly Installs

160

Repository

aj-geddes/usefu…-prompts

GitHub Stars

126

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode133

gemini-cli131

codex129

cursor122

claude-code115

github-copilot112