Skip to content

Commit

Permalink
feature: bundle visualizer (#949)
Browse files Browse the repository at this point in the history
* feat: Add --visualizer flag to generate build output stats

Co-authored-by: Alex Hayton <alex.hayton@gmail.com>

* docs: Adding changeset

* chore: Removing & git ignoring stats.html

Co-authored-by: Alex Hayton <alex.hayton@gmail.com>
  • Loading branch information
rschristian and AlexHayton authored Apr 25, 2022
1 parent ecb0b02 commit 242754f
Show file tree
Hide file tree
Showing 10 changed files with 391 additions and 90 deletions.
5 changes: 5 additions & 0 deletions .changeset/great-dolphins-tan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'microbundle': minor
---

Add --visualize flag to generate build output stats
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,4 @@ yarn.lock
.idea
.rts2*
sizes.csv
test/fixtures/visualizer/stats.html
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,10 @@ microbundle --workers
For more information see
[@surma/rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread#config).
### Visualize Bundle Makeup
Use the `--visualize` flag to generate a `stats.html` file at build time, showing the makeup of your bundle. Uses [rollup-plugin-visualizer](https://www.npmjs.com/package/rollup-plugin-visualizer).
### Mangling Properties
To achieve the smallest possible bundle size, libraries often wish to rename internal object properties or class members to smaller names - transforming `this._internalIdValue` to `this._i`. Microbundle doesn't do this by default, however it can be enabled by creating a `mangle.json` file (or a `"mangle"` property in your package.json). Within that file, you can specify a regular expression pattern to control which properties should be mangled. For example: to mangle all property names beginning an underscore:
Expand Down Expand Up @@ -342,6 +346,7 @@ Options
--css Where to output CSS: "inline" or "external" (default "external")
--css-modules Configures .css to be treated as modules (default null)
--workers Bundle module workers - see https://git.io/J3oSF (default false)
--visualize Generate bundle makeup visualization (stats.html)
-h, --help Displays this message

Examples
Expand Down
Loading

0 comments on commit 242754f

Please sign in to comment.