How does it visualize bundle composition?

It helps install and configure tools like webpack-bundle-analyzer and rollup-plugin-visualizer to generate interactive treemaps of your code.

Which build tools does this skill support?

It provides comprehensive support for Webpack, Vite, Rollup, Next.js, and Create React App, offering specific configurations for each.

Can this skill help with tree shaking?

Yes, it identifies imports that aren't being properly tree-shaken and suggests more efficient coding patterns or alternative libraries.

Does it integrate with CI/CD workflows?

Yes, the skill includes templates for setting up automated bundle size checks in environments like GitHub Actions using size-limit.

JavaScript Bundle Analyzer

Name: JavaScript Bundle Analyzer
Author: Dexploarer

byDexploarer

•

分析と監視

Analyzes and optimizes JavaScript bundle sizes to improve web application performance and loading speeds.

概要

The Bundle Analyzer skill empowers developers to diagnose and reduce JavaScript bundle bloat across modern build systems including Webpack, Vite, Rollup, and Next.js. It automates the process of installing analysis tools, identifying heavy dependencies like Moment.js or Lodash, detecting duplicate packages, and implementing advanced optimization strategies such as route-based code splitting and tree shaking. By providing actionable insights and automated configurations, it helps engineering teams maintain high performance and fast 'Time to Interactive' for their web applications.

主な機能

2 GitHub stars
Detailed reporting with estimated file size savings and optimization roadmaps
Implementation of advanced code splitting and manual chunking strategies
Automatic detection and configuration for Webpack, Vite, Rollup, and Next.js
Automated setup of bundle size budgets and performance limits
Identification of oversized, unused, and duplicate dependencies

ユースケース

Migrating from legacy heavy libraries to lightweight, modern alternatives
Integrating bundle size monitoring into CI/CD pipelines to prevent performance regression
Reducing the initial load time and 'Time to Interactive' for complex web apps

概要

主な機能

2 GitHub stars
Detailed reporting with estimated file size savings and optimization roadmaps
Implementation of advanced code splitting and manual chunking strategies
Automatic detection and configuration for Webpack, Vite, Rollup, and Next.js
Automated setup of bundle size budgets and performance limits
Identification of oversized, unused, and duplicate dependencies

ユースケース

Migrating from legacy heavy libraries to lightweight, modern alternatives
Integrating bundle size monitoring into CI/CD pipelines to prevent performance regression
Reducing the initial load time and 'Time to Interactive' for complex web apps