Statistical analysis of compilation and packaging of Webpack 2 using visual charts

This article mainly on the use of visual charts on the compilation and packaging of Webpack 2 for statistical analysis of the detailed explanation, for you to more intuitive reference.

In a total of 17 chapters previously updated, we explained in detail the Webpack 2 from configuration to packaging, compression optimization to debug state, and in this section, we have a more profound understanding of the packaging and compiling process of Webpack 2 through visual graphs, Visualization of the graphs is also a very intuitive solution to the project overview and optimization guidance.

1. Compilation statistics generation for Webpack 2

The parameters that let Webpack 2 generate statistics are mainly configured with the following two.

• --profile statistics generated to the execution time related information, optional parameters;
• --json let Webpack generate statistics, and the output format is JSON.

The following is package.json the configuration in the test project.

After configuration, execute commands at the command line to npm run stats see the generated statistics files in the project directory stats.json .

2. Generate visual charts with generated data 2.1 Official visual analysis tool

The official is given a visualization tool, the address in http://webpack.github.io/analyse/, select the above generated files can be generated for stats.json the project generated by the visual chart.

In this chart you can see the size of your project's build file, the reference relationship, and information about the modules in your project.

2.2 Webpack Visualizer

Also a Web build tool, select upload generated files to stats.json generate the chart.

2.3 Detection and charting of duplicate packages

You can install the Duplicate-package-checker-webpack-plugin plug-in to detect duplicate packages in your project to facilitate reference optimization of your project.

Of course, you can generate a more cool graphical statistic directly from a previously generated data file.
https://alexkuz.github.io/webpack-chart/

2.4 Non-use resource detection

You can also use https://www.npmjs.com/package/webpack-unused to detect those resource files in your project that are not being used for later optimization project reference.

2.5 3D Chart Generation

There is also a tool that can generate 3D icons, but it seems that the information is too confusing for the toy to play.
https://alexkuz.github.io/stellar-webpack/

2.6 Some other tools

You can install a component locally to generate a resource occupancy icon that can be scaled down.
Https://www.npmjs.com/package/webpack-bundle-analyzer

A visualizer for generating package dependencies that can be used to graphically view information such as circular dependencies between packages.

3. Summary

These visual tools can greatly improve the efficiency of finding optimization goals when they are optimized for later projects.
However, all performance issues and package dependencies should always be used throughout the development of the project, rather than relying on the final optimization of project-dependent confusion, lest Humpty.

Source: https://www.cnblogs.com/libin-1/p/7027164.html

From for notes (Wiz)

Statistical analysis of compilation and packaging of Webpack 2 using visual charts