(wmr): Adding bundle visualizer #508
Conversation
🦋 Changeset detectedLatest commit: 89b402e The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Size Change: +37.6 kB (+5%) 🔍 Total Size: 733 kB
ℹ️ View Unchanged
|
| /fs\.readFile\(path\.join\(__dirname,\s*(.+?)\)\s*,\s*"utf8"\s*\)/g, | ||
| (str, stringifiedJoin) => { | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| const filePathParts = stringifiedJoin | ||
| .replace(/['"`]+/g, '') | ||
| .replace(/\$\{template\}/g, 'treemap') | ||
| .split(', '); | ||
| const filepath = path.resolve(path.dirname(id), ...filePathParts); |
There was a problem hiding this comment.
For simplicity's sake when reviewing, these are the lines that need to be replaced: https://github.com/btd/rollup-plugin-visualizer/blob/799b5337db4fbbf8b83119b6251efe9e33c0ab69/plugin/build-stats.js#L58-L59
The template is a visualizer format, i.e., treemap, sunburst, or network. Treemap seems to be the most common so I just went with that.
|
Well, that's interesting / timely :) |
|
Tested. Seems to represent my pre-rendered JS bundles / chunks accurately. Thank you! |
This adds a bundle visualizer behind the
--visualizeflag forwmr build. Visualizer plugin used: https://github.com/btd/rollup-plugin-visualizerWhen ran, a
stats.htmlfile will be created in the root of the project and the file will be opened in the users' default user agent. They'll get a tree graph that will show the break down of their app rendered as well as with brotli and gzip.Seems like the most popular visualizer for Rollup, and is on Vite's roadmap of plugins to cover. This does increase the bundle as a bit as the template JS is ~82kb (mostly) unminified