Dojo
Docs Tutorials Cookbook Blog

modern web apps

  • Access drag information
  • Manage state in your application
  • Use built-in Dojo ponyfills

performance

  • Visualize your bundle contents

rendering

  • Access a raw DOM node
  • Get the rendered dimensions of an element
  • Use JSX templating

routing

  • Generate dynamic hyperlinks
  • Render URL aware widgets
  • Get the dynamic components of a URL from within a widget

styling

  • Style a built-in widget using themes
  • Create a themeable widget
  • Style a virtual DOM node with simple CSS classes

testing

  • Test and mock the imports of a widget

widgets

  • Discover all built-in Dojo 2 widgets
  • Handle string localization within a widget
  • Lazy load a widget
  • Pass and receive properties with widgets
  • Render a list from an array
  • Render a built-in Dojo 2 widget
  • Build an SVG chart
  • Force a widget to re-render itself
  • Allow a widget to receive additional properties in TypeScript

Objective

This recipe demonstrates how you can use a tool to visualize what JavaScript modules are being output into your main JavaScript bundle.

Procedure

  1. Run the command dojo build

  2. Open the HTML file dist/report.html in your web browser

  3. Click on the different segments of the chart to dive deeper

JS Bundle

Additional resources

See the webpack-visualizer plugin on GitHub to learn more about the tool.

© 2018 JS Foundation, All Rights Reserved.