/ember-cli-bundle-analyzer

Analyze the size and contents of your Ember app's bundles

Primary LanguageHTMLMIT LicenseMIT

ember-cli-bundle-analyzer

CI Ember Observer Score npm version

An Ember CLI addon to analyze the size and contents of your app's bundled output, using an interactive zoomable treemap.

View the interactive Demo

Screenshot of analyzer output

This helps you to

  • analyze which individual modules make it into your final bundle
  • find out how big each contained module is, including the raw source, minified and gzipped sizes
  • find modules that got there by mistake
  • optimize your bundle size

It uses broccoli-concat-analyser under the hood, which in turn was inspired by webpack-bundle-analyzer, and wraps it in Ember CLI addon to make it easy to use.

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v3.12 or above
  • Node.js v10 or above

Installation

ember install ember-cli-bundle-analyzer

Usage

After you have started your development server using ember serve, this addon adds a custom middleware listening to /_analyze. So just open http://localhost:4200/_analyze in your web browser to access the analyzer output.

While it processes the data, which can take a while due to live minification and compression of all involved modules, a loading screen is displayed. After processing has finished you should see the final output.

Live reloading is supported, so whenever you change a project file the output will be re-computed and updated.

Options

You can customize the precessing by setting any of the following options into the 'bundle-analyzer' key of your ember-cli-build.js:

  • ignoreTestFiles (boolean): by default it will exclude all test files from the output. Set this to false to include them.

  • ignore (string | string[]): add files to ignore. Glob patterns are supported, e.g. *-fastboot.js.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.