vscode-treeshake-visualizer

Work in Progress

Visualize unbundled/bundled code right in your source code. Helpful to optimize your bundle.

Works for any bundler that generates sourcemaps.

Usage

This extension works by reading and parsing the *.map source maps, and track back to the original code and highlight unbundled code in your editor. To make it work, you will need to turn one your bundler's source map generation.

Customization

Visual Styles

You can customize the highlight styles by adding the following to your .vscode/settings.json:

{
  "treeshake-visualizer.cssBundledLine": {
    "backgroundColor": "#0843"
  },
  "treeshake-visualizer.cssUnbundledLine": {
    "backgroundColor": "#8503"
  }
}

TODO

• [x] Logo & Publish
• [x] FS Watcher
• [x] Status Toggle
• [ ] Toggle between Bundled / Unbundled view
• [x] Side panel for all matched files
  • [ ] File tree
  • [ ] Ignore files outside of workspace
  • [ ] Show coverage percentage (with a button to calculate all)
• [-] Display in modified code
  • [ ] (do a diff?)
• [ ] Jump to bundled location
• [x] Allow multiple sourcemaps to one source file
• [x] AST Based highlight (do a Acorn parse?) - so we don't overkill import/export/comments/types
  • [ ] Handle Vue SFC
  • [ ] Test Svelte
• [ ] Configurations
  • [x] Custom Styless
  • [ ] Allow bind command to rebuild source map
  • [x] Select folders as source (so we also mark files that are not bundled at all)
  • [ ] Ignore file types
  • [x] Ignore node_modules

Sponsors

License

MIT License © 2022 Anthony Fu