broccoli-concat-analyser
Analyzes bundle sizes and contents for broccoli-concat-based build chains with raw, uglified, and compressed metrics.
What is broccoli-concat-analyser?
broccoli-concat-analyser is a profiling tool for analyzing concatenated asset bundles in broccoli-concat-based build chains. It visualizes bundle sizes (raw, uglified, compressed) and contents to help developers identify optimization opportunities. The tool generates interactive HTML reports for detailed inspection of asset composition.
Frontend developers using broccoli-concat in their build pipelines, particularly those working on Ember.js applications via the ember-cli-bundle-analyzer addon.
It provides granular visibility into bundle composition and size metrics, enabling data-driven optimizations to reduce load times and improve application performance.
Overview
broccoli-concat-analyser is a profiling tool for build chains using broccoli-concat. It generates detailed visual reports showing the size and composition of concatenated bundles, helping developers understand and optimize their asset footprints.
Key Features
- Bundle Analysis — Displays raw, uglified (for JavaScript), and compressed sizes of concatenated assets.
- Visual Reports — Generates interactive foamtree visualizations (HTML files) for exploring bundle contents.
- Build Integration — Works with broccoli-concat-based workflows, triggered via environment variables during development.
- Ember Support — Integrated via ember-cli-bundle-analyzer addon for seamless use in Ember apps.
Philosophy
It provides actionable insights into asset composition to help developers reduce bundle bloat and improve performance.
Use Cases
Best For
- Analyzing bundle sizes in broccoli-concat-based build workflows
- Identifying large dependencies or redundant code in concatenated assets
- Optimizing frontend performance by visualizing compressed and uglified sizes
- Integrating bundle analysis into Ember.js development via addons
- Profiling asset composition during development with interactive reports
- Comparing bundle metrics before and after build optimizations
Not Ideal For
- Projects using modern bundlers like Webpack or Vite that have built-in analysis tools
- Teams requiring automated, headless bundle analysis in continuous integration pipelines
- Developers needing comprehensive analysis for non-JavaScript assets like CSS or images
Pros & Cons
Pros
Reports raw, uglified, and compressed bundle sizes, providing clear data for performance optimization based on the README's feature list.
Generates HTML files with foamtree visualizations that allow developers to explore bundle contents interactively, as shown in the example demo.
Integrated via the ember-cli-bundle-analyzer addon, enabling easy use in Ember.js apps without complex setup.
Tailored for broccoli-concat workflows, ensuring accurate profiling of concatenated assets within that ecosystem.
Cons
Only works with broccoli-concat, making it irrelevant for projects using other bundlers, as admitted by its niche focus.
Requires setting environment variables, running separate commands, and manually opening HTML files, lacking automation for streamlined workflows.
Uglified size metrics are currently limited to JavaScript, leaving other asset types like CSS with less detailed optimization insights.
Frequently Asked Questions
Related Projects
broccoli-stewBroccoli Stew is a utility library that provides a set of commonly used convenience functions for developers working with Broccoli.js, a JavaScript build tool. It aims to reduce boilerplate and streamline the creation of build pipelines by offering ready-made operations for file manipulation, debugging, and conditional logic. ## Key Features - **Conditional Execution** — `env` runs callbacks based on the current environment (e.g., development, production). - **File Manipulation** — `mv` and `rename` relocate or rename files within a build tree. - **File Filtering** — `find` matches files based on patterns, and `rm` removes files from a tree. - **Content Transformation** — `map` applies transformations to file contents. - **Debugging Tools** — `log` outputs file information, and `debug` writes the tree to disk for inspection. - **Post-Build Hooks** — `afterBuild` executes callbacks after the tree is read. - **Module Resolution** — `npm.main` creates a tree from a Node module's main entry point. ## Philosophy Broccoli Stew is designed to make Broccoli.js development more ergonomic by providing a curated set of utilities that handle common build pipeline tasks, allowing developers to focus on their application logic rather than low-level file operations.
broccoli-manifestHTML5 cache-manifest compilation for broccoli
broccoli-rollupBroccoli Plugin For Rollup
broccolijs-tutorialBroccoli.js Tutorial repository
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.