Table of Contents generated with DocToc

• Setting up analyze scripts
• Running the analyzer directly
• Version
• Help
• Contributors ✨

Welcome to Hawkeye, a powerful tool designed to help developers visualize and optimize their JavaScript bundles. With our intuitive interface, you can gain deep insights into your project’s bundle structure, identifying large modules, dependencies, and assets that may be impacting performance.

Our visual breakdown allows you to see exactly how your code and third-party libraries contribute to the overall size of your bundle, empowering you to make data-driven decisions to improve load times, enhance performance, and streamline your build process.

Hawkeye is provides a init command to help you set up analyze scripts in your package.json with ease. Simply run the following command and answer the questions from the wizard:

npx @angular-experts/hawkeye init

From here on you can run the following commands to analyze your project:

npm run analyze

How it works:

1. Generating build stats: It builds the project and creates a stats.json file containing information about the bundled output. You'll find this file in your project's output directory (usually ./dist).
2. Launching an analysis server: A server starts at http://localhost:1420.

Open it in your browser and upload the stats.json file to see a visual representation of your bundle's contents.

If you already have a stats.json and like to run the analyzer directly on it, you can do so by running the following command:

npx @angular-experts/hawkeye <pathToStatsJsonFile>

Use the following command to print the version of Hawkeye:

npx hawkeye --version

For more information on using Hawkeye, including detailed command references run:

npx hawkeye --help

Thanks goes to these wonderful people (emoji key):

Nivek 💻

Add your contributions