{"_id":"@vinxi/rollup-plugin-visualizer","name":"@vinxi/rollup-plugin-visualizer","dist-tags":{"latest":"5.7.1"},"versions":{"5.7.1":{"name":"@vinxi/rollup-plugin-visualizer","version":"5.7.1","main":"./dist/plugin/index.js","author":{"name":"Denis Bardadym","email":"bardadymchik@gmail.com"},"license":"MIT","bin":{"rollup-plugin-visualizer":"dist/bin/cli.js"},"repository":{"type":"git","url":"git+ssh://git@github.com/btd/rollup-plugin-visualizer.git"},"homepage":"https://github.com/btd/rollup-plugin-visualizer","bugs":{"url":"https://github.com/btd/rollup-plugin-visualizer/issues"},"scripts":{"lint":"eslint 'plugin/**/*.ts' 'src/**/*.{ts,tsx}'","build":"run-p build:*","build:plugin":"tsc","build:frontend":"node build.js","clean":"del-cli dist","test":"run-s test:*","test:e2e":"node build.js --all --e2e","test:test":"node build.js --all --test","test:e2e-json":"node build.js --all --e2e --json","test:test-json":"node build.js --all --test --json","test:e2e-json-sourcemap":"node build.js --all --e2e --json --sourcemap","test:test-json-sourcemap":"node build.js --all --test --json --sourcemap","test:cli":"node build.js --dev --all --gzip --brotli --sourcemap --json && node dist/bin/cli.js ./stats.sunburst.json"},"dependencies":{"nanoid":"^3.3.4","open":"^8.4.0","source-map":"^0.7.3","yargs":"^17.5.1"},"peerDependencies":{"rollup":"^2.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/bytes":"^3.1.1","@types/d3-array":"^3.0.3","@types/d3-color":"^3.1.0","@types/d3-force":"^3.0.3","@types/d3-hierarchy":"^3.1.0","@types/d3-scale":"^4.0.2","@types/d3-shape":"^3.1.0","@types/yargs":"^17.0.10","@typescript-eslint/eslint-plugin":"^5.25.0","@typescript-eslint/parser":"^5.25.0","bytes":"^3.1.2","d3-array":"^3.1.6","d3-color":"^3.1.0","d3-force":"^3.0.0","d3-hierarchy":"^3.1.2","d3-scale":"^4.0.2","d3-shape":"^3.1.0","del-cli":"^4.0.1","eslint":"^8.16.0","eslint-config-prettier":"^8.5.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.30.0","eslint-plugin-react-hooks":"^4.5.0","npm-run-all":"^4.1.5","postcss":"^8.4.14","postcss-url":"^10.1.3","preact":"^10.7.2","prettier":"^2.6.2","rollup":"^2.74.1","rollup-plugin-postcss":"^4.0.2","rollup-plugin-terser":"^7.0.2","sass":"^1.52.1","typescript":"^4.6.4"},"engines":{"node":">=14"},"keywords":["rollup-plugin","visualizer","network","treemap","sunburst","diagram"],"types":"./dist/plugin/index.d.ts","gitHead":"36ae4408b1fd8da465e9e194be5ebaa51ccf834e","description":"[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)](https://github.com/btd","_id":"@vinxi/rollup-plugin-visualizer@5.7.1","_nodeVersion":"17.1.0","_npmVersion":"8.1.2","dist":{"integrity":"sha512-gIwdH6B2rh7EoWgtL80yMW/0AM6riSXwNccM7rwMONG5CTVYzHYDQgnccrl40iWHrQLYZI0rvM66EQ1TRB8REA==","shasum":"f7de00c05fb04d78d18bf61f64da1b9fa194b423","tarball":"https://registry.npmjs.org/@vinxi/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.7.1.tgz","fileCount":31,"unpackedSize":478601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjikhghbP321ptTCH1VaXeTtnDrSNegka7VsgdbXMJ+AiAYAtS9/M8DI4sqDWYmiCF6viCzU41drAJmLngfc867dQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+15pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAyA//aStJUIZPKjrkAITJldpSxK0eqVQ0YgLSXlQII5VO+HqXRbYF\r\n7pjLGOszmdgHgYf8JlP2HxD9DSAhw6QQZeEiJ3RjszJLO8AK5jd8i1ShPg4O\r\n3DA0euyvSx8jCTjZZ37aafI8kuWqxeJ6bNa/V1TTpdqV6TuC2CjXN/SpnLPd\r\ni7Yxo7Tb5tZLZ5rgrl4Ne3e/uaoK3XL3ygUrEXzhJi67dsUg+Un6vvkPKkrH\r\nsmAGforeNikYxJCxsQcyIn9hce3v19cIU3vbMlYokh9vgoZCTVmXl9TbhurS\r\nxAn2+1DHrnHaCEg9+AGaZ5QE95yCJG63GUOAUUtdW+VNIi2CPdfMS++08Qju\r\n2II8JPaqaVzbtMvfhaH7yMSt/olpXlR+DFe6iqJFcFlvYcdDP0WlZzJ/Z5hl\r\nOminmTJi4Ebgx3a0J9akvIwtUCyOX2FELLRbEiUo+MzgDbWB/G+PZgm3sCAW\r\npm0yxa2x7uWzcd1JeTV/jD4v83kAQJYxcg0YigFGMQNcUlBTjlWuxI2nlBr4\r\nduDviQCXHVH1v4PANY37STqbVk3MSD2eY0FvhnYZQ747DF/B8PiOcvgt0LMO\r\nPGVcnAL2Lak/c+xAbeTXB0hmyNoqXy1rnUJ0rJWqxJlF3ahSGTcUzDI3pDY5\r\nAn1wu036o+hNn5xkQz3+Eim81/7NTnqUaiQ=\r\n=uwUw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"nksaraf","email":"nsaraf98@gmail.com"},"directories":{},"maintainers":[{"name":"nksaraf","email":"nsaraf98@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rollup-plugin-visualizer_5.7.1_1660640873184_0.1837738323819087"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-16T09:07:53.139Z","5.7.1":"2022-08-16T09:07:53.391Z","modified":"2022-08-16T09:07:53.524Z"},"maintainers":[{"name":"nksaraf","email":"nsaraf98@gmail.com"}],"description":"[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)](https://github.com/btd","homepage":"https://github.com/btd/rollup-plugin-visualizer","keywords":["rollup-plugin","visualizer","network","treemap","sunburst","diagram"],"repository":{"type":"git","url":"git+ssh://git@github.com/btd/rollup-plugin-visualizer.git"},"author":{"name":"Denis Bardadym","email":"bardadymchik@gmail.com"},"bugs":{"url":"https://github.com/btd/rollup-plugin-visualizer/issues"},"license":"MIT","readme":"# Rollup Plugin Visualizer\n\n[![NPM Version](https://img.shields.io/npm/v/rollup-plugin-visualizer.svg)](https://npmjs.org/package/rollup-plugin-visualizer) [![Node.js CI](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml/badge.svg)](https://github.com/btd/rollup-plugin-visualizer/actions/workflows/node.js.yml)\n\nVisualize and analyze your Rollup bundle to see which modules are taking up space.\n\n## Screenshots\n\n![pic](https://github.com/btd/rollup-plugin-visualizer/blob/master/pics/collage.png?raw=true)\n\n## Installation\n\n```sh\nnpm install --save-dev rollup-plugin-visualizer\n```\n\nor via yarn:\n\n```sh\nyarn add --dev rollup-plugin-visualizer\n```\n\n## Usage\n\nImport\n\n```javascript\n// es\nimport { visualizer } from \"rollup-plugin-visualizer\";\n// or\n// cjs\nconst { visualizer } = require(\"rollup-plugin-visualizer\");\n```\n\nUsage with rollup (rollup.config.js)\n\n```js\nmodule.exports = {\n  plugins: [\n    // put it the last one\n    visualizer(),\n  ],\n};\n```\n\nUsage with vite (vite.config.js)\n\n```js\nmodule.exports = {\n  plugins: [visualizer()],\n};\n```\n\nUsage with SvelteKit (vite.config.js)\n\n```js\nconst config = {\n  plugins: [\n    visualizer({\n      emitFile: true,\n      file: 'stats.html'\n    })\n  ],\n};\n\nexport default config;\n```\n\nYou will find 2/3 files in .svelte-kit/output dir named stats.html (see vite logs for file locations) . You can use this snippet as a starting point and change props/path.\nYou can also generate 3 json files and combine them to one with cli util.\n\n## How to use generated files\n\nBlue color used to to mark project-own files. This could be: written by you files or generated by build tool files.\n\nGreen color used to mark your dependencies.\n\nInternally it just checks if file id prefix is `node_modules`.\n\nAll charts refresh layout on window resize.\n\n### Sunburst\n\nThis circular hierarchical diagram can help you find huge peaces of code (aka that one huge thing). If you click on some arc it will increase its and all nested arcs size for better inspection.\n\n### Treemap\n\nThis rectangular hierarchical diagram can help you find huge peaces. Just look on biggest reclangle. But also it can help you find modules included several times, they will have the same topology and relative size. If you click on reclangle it will increase in size for further inspection.\n\n### Network\n\nThis digram should help you answer for the question 'why it is included?'. After force layout stabilize all nodes, you can move it back and forth by dragging with your mouse. Gray circles are treeshakened out files.\n\nIn real life scenarious, sometimes you will see terribly connected diagrams. There is no 100% working solution for everyone, it is expected you topology will look 'terrible' and not hold on screen. To make it still visually ispectable, first remove all highly connected nodes that you see (typical examples: commonjsHelpers, tslib, react etc, basically if tooltip for the node is not hold on the screen - exclude this node), after layout stabilization you will see, your layout is not that terrible anymore and most of dependencies cluster together. Move layout to find peaces you looked for.\n\nWhen you click on node it will hightlight nodes that are listed in tooltip (the files that imports current node).\n\n## Options\n\n`filename` (string, default `stats.html`) - name of the file with diagram to generate\n\n`title` (string, default `Rollup Visualizer`) - title tag value\n\n`sourcemap` (boolean, default `false`) - Use sourcemaps to calculate sizes (e.g. after UglifyJs or Terser). **Always add plugin as last option.**\n\n`open` (boolean, default `false`) - Open generated file in default user agent\n\n`emitFile` (boolean, default `false`) - Use rollup's `emitFile` to generate file\n\n`template` (string, default `treemap`) - Which diagram type to use: `sunburst`, `treemap`, `network`.\n\n`json` (boolean, default `false`) - Produce portable json file that can be used with plugin CLI util to generate graph from several json files. Every UI property ignored in this case.\n\n`gzipSize` (boolean, default `false`) - Collect gzip size from source code and display it at chart.\n\n`brotliSize` (boolean, default `false`) - Collect brotli size from source code and display it at chart.\n\n`projectRoot` (string | RegExp, default `process.cwd()`) - This is some common root(s) path to your files. This is used to cut absolute files paths out.\n\n## CLI\n\nThis plugin provides cli util `rollup-plugin-visualizer`. Add `--help` to check actual options. It can be used like:\n\n```sh\nrollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json\n```\n\nThis can be usefull in case you have different config files in the same project and you want to display all of them in the same chart.\n\n## Build plugin\n\nFor development if you need to build plugin, just exec:\n\n```js\nnpm run build\n```\n\n## Disclaimer about generated files\n\nGenerated html files do not and never will contain your source code (contents of files). They can contain only js/html/css code required to build chart (plugin code) and statistical information about your source code.\n\nThis statistical information can contain:\n\n- size of files included in bundle\n- size of files included in source map\n- file's paths\n- files hierarchy (fs tree for your files)\n\n## Upgrades\n\nSee CHANGELOG.md.\n","readmeFilename":"README.md"}