How to use the rollup-plugin-visualizer function in rollup-plugin-visualizer

// browser only. Rollup's dead code elimination will remove
          // any code guarded by if (isNode) { ... }
          "if (isNode)": "if (false)"
        }
      }),
      nodeResolve({
        mainFields: ["module", "browser"],
        preferBuiltins: false
      }),
      cjs({
        namedExports: {
          "@opentelemetry/types": ["CanonicalCode", "SpanKind", "TraceFlags"],
          assert: ["ok", "fail", "equal", "deepEqual", "deepStrictEqual", "strictEqual"]
        }
      }),
      viz({ filename: "browser/browser-stats.html", sourcemap: false })
    ]
  };

  if (test) {
    baseConfig.input = "dist-esm/test/**/*.spec.js";
    baseConfig.plugins.unshift(multiEntry({ exports: false }));
    baseConfig.output.file = "test-browser/index.js";

    // Disable tree-shaking of test code.  In rollup-plugin-node-resolve@5.0.0, rollup started respecting
    // the "sideEffects" field in package.json.  Since our package.json sets "sideEffects=false", this also
    // applies to test code, which causes all tests to be removed by tree-shaking.
    baseConfig.treeshake = false;
  }

  return baseConfig;
}

'/dist/css/shepherd.css': 'dist/css/shepherd.css',
          '/dist/js/shepherd.js': 'dist/js/shepherd.js',
          '/demo/js/prism.js': 'demo/js/prism.js',
          '/demo/js/welcome.js': 'demo/js/welcome.js',
          '/demo/css/prism.css': 'demo/css/prism.css',
          '/demo/css/welcome.css': 'demo/css/welcome.css',
          '/demo/sheep.svg': 'demo/sheep.svg'
        }
      }
    })
  );
}

plugins.push(license({ banner }));
plugins.push(filesize());
plugins.push(visualizer());

const rollupBuilds = [
  // Generate unminifed bundle
  {
    input: './src/js/shepherd.js',

    output: [
      {
        file: pkg.main,
        format: 'umd',
        name: 'Shepherd',
        sourcemap: true
      },
      {
        file: pkg.module,
        format: 'esm',

},
    {
      file: pkg.module,
      format: 'es',
      ...commonOutput
    }
  ],
  external: ['react', 'react-dom', 'styled-components'],
  plugins: [
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    }),
    cjs(),
    globals(),
    resolve(),
    process.env.ANALYZE_PACKAGE && visualizer()
  ]
};

nodeResolve({
    jsnext: true
  }),
  commonjs({
    // exclude: ['node_modules/**']
    namedExports: {
      'node_modules/prop-types/index.js': ['PropTypes']
    }
  }),
  replace({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
];

if (prod)
  plugins.push(terser(), visualizer({ filename: './bundle-stats.html' }));

const input = 'src/index.js';
const outputName = 'screenfull-react';
const external = ['react', 'react-dom'];
const globals = {
  react: 'React',
  'react-dom': 'ReactDOM'
};

export default {
  input,
  output: [
    {
      name: outputName,
      file: 'dist/screenfull-react.js',
      format: 'cjs',

// browser only. Rollup's dead code elimination will remove
          // any code guarded by if (isNode) { ... }
          "if (isNode)": "if (false)"
        }
      }),
      nodeResolve({
        mainFields: ["module", "browser"],
        preferBuiltins: false
      }),
      cjs({
        namedExports: {
          events: ["EventEmitter"],
          "@opentelemetry/types": ["CanonicalCode", "SpanKind", "TraceFlags"]
        }
      }),
      viz({ filename: "browser/browser-stats.html", sourcemap: false })
    ]
  };

  if (test) {
    baseConfig.input = "dist-esm/test/*.spec.js";
    baseConfig.plugins.unshift(multiEntry({ exports: false }));
    baseConfig.output.file = "test-browser/index.js";

    // Disable tree-shaking of test code.  In rollup-plugin-node-resolve@5.0.0, rollup started respecting
    // the "sideEffects" field in package.json.  Since our package.json sets "sideEffects=false", this also
    // applies to test code, which causes all tests to be removed by tree-shaking.
    baseConfig.treeshake = false;
  }

  return baseConfig;
}

!isProduction && 'flow-react-proptypes',
        isProduction && 'transform-react-remove-prop-types',
        !isProduction && [
          'transform-runtime',
          { helpers: false, polyfill: false, regenerator: true },
        ],
        'transform-flow-strip-types',
        'transform-class-properties',
        'transform-object-rest-spread',
        'external-helpers',
      ].filter(Boolean),
      ignore: '**/*.test.js',
      exclude: 'node_modules/**',
    }),
    isProduction && uglify(),
    isProduction && visualizer({ filename: './bundle-stats.html' }),
  ].filter(Boolean),
};

export const globals = { diffhtml: 'diff' };
export const external = ['diffhtml'];

export const output = [{
  file: dests[NODE_ENV],
  format: 'umd',
  exports: 'default',
  name: 'logger',
  sourcemap: false,
}];

export const plugins = [
  NODE_ENV === 'min' && replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
  babel(),
  nodeResolve({ jsnext: true }),
  NODE_ENV === 'umd' && Visualizer({ filename: './dist/build-size.html' }),
];

const getPlugins = (name: string) => ({
  babel: babel({
    runtimeHelpers: false,
    exclude: /(\.re|node_modules.*)/,
  }),
  replace: replace({
    'process.env.NODE_ENV': JSON.stringify('production'),
  }),
  commonjs: commonjs({}),
  resolve: resolve({}),
  sizeSnapshot: sizeSnapshot({
    printInfo: false,
  }),
  analyzer: analyze({
    filename: `stats/${name}.html`,
    title: `${name} size report`,
    sourcemap: true,
    template: 'treemap',
  }),
  analyzerJSON: analyze({
    sourcemap: true,
    json: true,
    filename: `stats/${name}.json`,
  }),
  terser: terser(
    minifyConfig({
      beautify: !!process.env.PRETTIFY,
    }),
  ),
  graph: graphPlugin({

environment === 'production' ?  license( {
			banner: `${ pkg.name } v${ pkg.version }
License: ${ pkg.license }
Repository: ${ pkg.repository.url }
Generated on ${ moment().format( 'YYYY-MM-DD [at] HH:mm:ss' ) }.
By ${ allContributorsString }`,
		} ) : undefined,

		environment === 'production' ? terser({
			compress: {
				passes: 2,
				unsafe: true,
			}
		}) : undefined,

		environment === 'production' ? visualizer( { filename: `./stats/${ iife ? 'iife' : 'esm' }.html` } ) : undefined,

		iife ? babel( {
			exclude: 'node_modules/**',
			extensions: ['.js', '.ts', '.html'],
		} ) : undefined,
	] );
}

plugins: [babel()],
  }),
  ...(IS_UMD && {
    output: {
      file: IS_DEVELOPMENT ? pkg.dist : pkg.dist.replace('.js', '.min.js'),
      format: RESTQL_FMT,
      name: pkg.name,
    },
    plugins: [
      builtins(),
      resolve({ browser: true }),
      commonjs({ exclude: 'src/**' }),
      json({ exclude: 'src/**' }),
      globals(),
      babel(),
      IS_DEVELOPMENT && visualizer(),
      IS_PRODUCTION && uglify(),
    ].filter(Boolean),
  }),
}

export default config