Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: bundle visualizer #949

Merged
merged 3 commits into from Apr 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/great-dolphins-tan.md
@@ -0,0 +1,5 @@
---
'microbundle': minor
---

Add --visualize flag to generate build output stats
1 change: 1 addition & 0 deletions .gitignore
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
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