Bundle analysis

Once you start splitting code, it can be useful to analyze the output and check where modules have ended up. It's important to get the most out of bundling, so a formal procedure for bundle analysis can be considered as fundamental, as well as browser and security testing. The official analyze tool is recommended. There are also some other options:

  • webpack-bundle-analyzer: This is a plugin and CLI utility that represents bundle content as a convenient interactive treemap, where zooming options are available.
  • webpack-bundle-optimize-helper: This tool will analyze your bundle and give suggestions to reduce your bundle size.
  • webpack-visualizer: This is used to visually analyze bundles to see which modules are taking up too much space and which might be duplicated.
  • webpack-chart: This offers an interactive pie chart used for Webpack stats.
Treemapping is a method used to display hierarchical data using nested figures, usually rectangles.

All the previously mentioned tools will help with optimization, which is the primary purpose of Webpack.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.156.140