npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gasket/plugin-analyze

v7.0.9

Published

Gasket Analyzer Plugin

Downloads

816

Readme

@gasket/plugin-analyze

Gasket plugin for building analysis reports of webpack bundles using webpack-bundle-analyzer.

Installation

npm i @gasket/plugin-analyze

Update your gasket file plugin configuration:

// gasket.js

+ import pluginAnalyze from '@gasket/plugin-analyze';

export default makeGasket({
  plugins: [
+   pluginAnalyze
  ]
});

Configuration

  • bundleAnalyzerConfig - (object) Configuration options for the Webpack bundle analyzer. Define settings for both browser and server bundles.
    • browser - (object) Options specific to the client-side bundle analysis. See plugin options.
    • server - (object) Options specific to the server-side bundle analysis. See plugin options.

This plugin uses webpack-bundle-analyzer and as such, all of its plugin options are available for tuning both browser and server analysis reports. These options are defined in the bundleAnalyzerConfig object in your gasket.js.

By default, the analyzeMode is set to static, meaning the analysis reports are generated as HTML files, and the reports are output to a reports directory at the root of the project.

Example

// gasket.js

export default makeGasket({
  bundleAnalyzerConfig: {
    browser: {
      defaultSizes: 'gzip' // Analyze the gzipped sizes of the bundles
    },
    server: {
      openAnalyzer: false // Do not automatically open the report in the browser
    }
  }
});

Default Configuration

If no bundleAnalyzerConfig is provided, the plugin defaults to generating both browser and server reports in the reports directory:

  • Browser reports: reports/browser-bundles.html
  • Server reports: reports/server-bundles.html

These paths can be customized in bundleAnalyzerConfig under reportFilename for each type of bundle (browser and server).

NPM script

analyze

The npm script analyze will execute the following:

ANALYZE=true next build

When this script is run, the @gasket/plugin-analyse will add the webpack-bundle-analyzer to the webpack config.

Reports for both browser and server-side rendering will be generated, with the following output:

  • reports/browser-bundles.html
  • reports/server-bundles.html

Only when ANALYZE=true is set in the environment, will the analyzer plugin be added to Webpack, ensuring that the bundle analyzer is used specifically for this analysis task.

Example Usage

To run the analyzer:

npm run analyze

The browser report will be most critical for analyzing bundle size optimizations, ensuring that the app is optimized for download efficiency from the user's perspective.

License

MIT