diff --git a/README.md b/README.md index 73f5fbe..bab4d1b 100644 --- a/README.md +++ b/README.md @@ -1,335 +1,106 @@ # Bundle Size Tracker -[![npm version](https://badge.fury.io/js/@avixiii%2Fbundle-size-tracker.svg)](https://badge.fury.io/js/@avixiii%2Fbundle-size-tracker) -[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) -[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/) - -A powerful and flexible tool to track and analyze JavaScript bundle sizes across different build tools. Monitor your bundle sizes, set size limits, and get detailed reports in various formats. +A powerful tool to track and optimize your JavaScript bundle sizes with AI-powered suggestions. ## Features -- Track bundle sizes during build process -- Support for multiple build tools: - - Webpack - - Rollup - - Vite -- Multiple report formats: - - Console output - - JSON reports - - HTML reports with visualizations -- File compression analysis: - - Gzip compression - - Brotli compression -- Custom size limits per bundle -- Easy CI/CD integration -- Full TypeScript support -- Configurable alerts and warnings -- AI-powered bundle optimization suggestions +### Core Features +- Track bundle sizes across builds +- Set size limits and get warnings +- Generate detailed reports +- Support for multiple compression formats (raw, gzip, brotli) +- Integration with CI/CD pipelines + +### AI-Powered Optimization (New in v0.1.2) +- Intelligent bundle analysis using OpenAI's GPT models +- Smart code splitting suggestions +- Tree shaking opportunities detection +- Dependency analysis +- Performance impact predictions + +### Performance Optimizations (New in v0.1.2) +- Preact compatibility layer for React apps +- Optimized chunk splitting strategies +- Advanced tree shaking configuration +- Styled-components optimization +- Dynamic imports and code splitting +- Bundle size reduction up to 50% ## Installation ```bash npm install @avixiii/bundle-size-tracker --save-dev -# or -yarn add -D @avixiii/bundle-size-tracker -# or -pnpm add -D @avixiii/bundle-size-tracker ``` -## Quick Start +## Usage -### Webpack +### Basic Usage ```javascript // webpack.config.js -const { BundleSizeTrackerPlugin } = require('@avixiii/bundle-size-tracker'); +const { bundleSizeTrackerWebpack } = require('@avixiii/bundle-size-tracker'); module.exports = { - // ... other config - plugins: [ - new BundleSizeTrackerPlugin({ - maxSize: 500, // 500KB limit - outputFormat: 'html', - outputPath: './reports' - }) - ] -}; -``` - -### Rollup - -```javascript -// rollup.config.js -import { bundleSizeTracker } from '@avixiii/bundle-size-tracker'; - -export default { - // ... other config - plugins: [ - bundleSizeTracker({ - maxSize: 300, - outputFormat: 'json' - }) - ] -}; -``` - -### Vite - -```javascript -// vite.config.js -import { bundleSizeTrackerVite } from '@avixiii/bundle-size-tracker'; - -export default { - plugins: [ - bundleSizeTrackerVite({ - maxSize: 400, - outputFormat: 'console' - }) - ] -}; -``` - -### CLI Usage - -```bash -# Check bundle sizes in a directory -npx @avixiii/bundle-size-tracker --max-size 500 --output html --dir ./dist - -# With custom configuration -npx @avixiii/bundle-size-tracker --config bundle-size.config.js -``` - -## Configuration Options - -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `maxSize` | number | 500 | Maximum allowed size in KB | -| `outputFormat` | 'console' \| 'json' \| 'html' | 'console' | Report format | -| `outputPath` | string | './report' | Output directory for reports | -| `rules` | BundleRule[] | [] | Custom rules for specific bundles | - -### Custom Rules - -You can set specific size limits for different bundles: - -```javascript -{ - rules: [ - { - pattern: 'vendor', // or /vendor\..*\.js$/ - maxSize: 800 // 800KB limit for vendor bundles - }, - { - pattern: 'main', - maxSize: 200 // 200KB limit for main bundle - } - ] -} -``` - -## AI-Powered Bundle Optimization - -This package now includes AI-powered bundle analysis and optimization suggestions powered by OpenAI's GPT models. This feature provides: - -- Intelligent code splitting suggestions -- Tree shaking optimization opportunities -- Smart dependency analysis -- Performance impact predictions - -### Setup AI Features - -1. Copy `.env.example` to `.env`: -```bash -cp .env.example .env -``` - -2. Add your OpenAI API key to `.env`: -```env -OPENAI_API_KEY=your_api_key_here -``` - -3. Configure AI options in your build config: - -```javascript -// webpack.config.js -module.exports = { + // ... your webpack config plugins: [ bundleSizeTrackerWebpack({ - // ... other options + maxSize: 1000, // KB ai: { enabled: true, - model: 'gpt-4', // optional - temperature: 0.7 // optional + model: 'gpt-3.5-turbo', + temperature: 0.7 } }) ] }; ``` -### AI Analysis Results - -The AI analysis provides detailed insights including: - -- Specific code splitting points with estimated impact -- Unused exports that can be safely removed -- Bundle size optimization recommendations -- Performance improvement estimates - -Example output: -```json -{ - "aiAnalysis": { - "optimizations": [ - "Split vendor chunks for better caching", - "Remove unused moment.js locales", - "Implement dynamic imports for route components" - ], - "impact": { - "sizeReduction": 152000, - "performanceImprovement": 35 - }, - "codeSplitting": { - "splitPoints": [ - "src/routes/admin/*", - "src/components/charts/*" - ] - }, - "treeShaking": { - "unusedExports": [ - { - "module": "@material-ui/icons", - "exports": ["UnusedIcon1", "UnusedIcon2"] - } - ] - } - } -} -``` - -## GitHub Actions Integration - -Create `.github/workflows/bundle-size.yml`: - -```yaml -name: Bundle Size Check - -on: - pull_request: - branches: [ main ] - -jobs: - check-bundle-size: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Setup Node.js - uses: actions/setup-node@v3 - with: - node-version: '18' - cache: 'npm' - - - name: Install dependencies - run: npm ci - - - name: Build - run: npm run build - - - name: Check bundle size - run: npx @avixiii/bundle-size-tracker --max-size 500 --output json - # Will exit with code 1 if any bundle exceeds the limit -``` - -## Programmatic Usage +### Environment Variables -You can also use the analyzer programmatically: +Create a `.env` file: -```typescript -import { BundleSizeAnalyzer } from '@avixiii/bundle-size-tracker'; - -const analyzer = new BundleSizeAnalyzer({ - maxSize: 500, - outputFormat: 'json', - outputPath: './reports' -}); - -// Analyze specific files -await analyzer.analyzeBundles([ - 'dist/main.js', - 'dist/vendor.js' -]); -``` - -## Report Examples - -### Console Output -``` - Bundle Size Report - -Generated: 2024-12-29T04:12:22.777Z -Status: PASS -Total Size: 264.09 KB - -main.js -Size: 58.94 KB -Limit: 400KB -Status: Within limit - -vendor.js -Size: 204.58 KB -Limit: 400KB -Status: Within limit -``` - -### HTML Report -The HTML report includes a visual representation of bundle sizes with color-coding for bundles that exceed their limits. - -### JSON Report -```json -{ - "timestamp": "2024-12-29T04:12:13.436Z", - "bundles": [ - { - "name": "main.js", - "size": 169160, - "exceedsLimit": false, - "sizeLimit": 300 - } - ], - "status": "pass", - "totalSize": 169160 -} +```env +OPENAI_API_KEY=your_api_key +OPENAI_MODEL=gpt-3.5-turbo +AI_TEMPERATURE=0.7 ``` -## Contributing - -Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests. +## Test Project -## Development +The repository includes a test project that demonstrates the optimization capabilities: ```bash -# Clone the repository -git clone https://github.com/avixiii-dev/bundle-size-tracker.git - -# Install dependencies +cd test-projects/ai-test npm install - -# Build npm run build - -# Run tests -npm test - -# Run linter -npm run lint ``` -## License +The test project showcases: +- React/Preact compatibility +- MUI components optimization +- Dynamic imports +- Tree shaking +- Code splitting +- Bundle size optimization + +## Changelog + +### v0.1.2 (2025-01-02) +- Added AI-powered bundle analysis +- Added Preact compatibility layer +- Improved code splitting strategies +- Added styled-components optimization +- Added tree shaking improvements +- Added test project with optimization examples +- Reduced bundle sizes by up to 50% + +### v0.1.1 +- Initial release +- Basic bundle size tracking +- Size limits and warnings +- Compression format support +- CI/CD integration -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. - -## Support +## License -- Create an [Issue](https://github.com/avixiii-dev/bundle-size-tracker/issues) for bug reports and feature requests -- Star the project if you find it useful -- Follow the [author](https://github.com/avixiii-dev) for updates +MIT diff --git a/package.json b/package.json index 8dc4f5e..987410a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@avixiii/bundle-size-tracker", - "version": "0.1.1", - "description": "A powerful and flexible tool to track and analyze JavaScript bundle sizes across different build tools", + "version": "0.1.2", + "description": "A powerful tool to track and optimize your JavaScript bundle sizes with AI-powered suggestions", "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -15,7 +15,7 @@ ], "scripts": { "build": "tsc", - "test": "echo \"No tests specified yet\" && exit 0", + "test": "jest", "lint": "eslint \"src/**/*.{js,ts}\" --fix", "prepublishOnly": "npm run build", "prepare": "npm run build" @@ -25,12 +25,12 @@ "size", "tracker", "webpack", - "rollup", - "vite", + "optimization", + "ai", "analysis", "performance" ], - "author": "avixiii-dev", + "author": "Tuan ", "license": "MIT", "repository": { "type": "git", @@ -49,16 +49,16 @@ "@types/glob": "^8.0.0", "chalk": "^4.1.2", "commander": "^11.0.0", - "dotenv": "^16.0.3", + "dotenv": "^16.3.1", "filesize": "^10.0.0", "glob": "^10.0.0", - "openai": "^4.0.0" + "openai": "^4.24.1" }, "devDependencies": { "@types/jest": "^29.5.11", - "@types/node": "^20.10.6", - "@typescript-eslint/eslint-plugin": "^6.17.0", - "@typescript-eslint/parser": "^6.17.0", + "@types/node": "^20.10.5", + "@typescript-eslint/eslint-plugin": "^6.15.0", + "@typescript-eslint/parser": "^6.15.0", "eslint": "^8.56.0", "jest": "^29.7.0", "rollup": "^3.29.4",