![ECMAScript Cookbook](https://wfqqreader-1252317822.image.myqcloud.com/cover/58/36700058/b_36700058.jpg)
上QQ阅读APP看书,第一时间看更新
How to do it...
- Open your command-line application and navigate to the directory containing the 02-creating-client-bundles package.
- Run the webpack and output the profile output to a JSON file:
./node_modules/.bin/webpack --config webpack.config.js --profile --json > compilation-stats.json
- To see which modules are taking up the most space in your bundle, open your browser and visit the URL:
https://chrisbateman.github.io/webpack-visualizer/. - Drag and drop the file or use the file selector to select compilation-stats.json.
- You should see a chart that will give you hoverable module size information:
![](https://epubservercos.yuewen.com/C944E7/19470395501577006/epubprivate/OEBPS/Images/cb9dfeb9-f9cb-490f-b36c-cbf68277e883.png?sign=1739296161-J1mFDipyKiNhBbYQ6AAoAgLhlUv3AHk8-0-1aa470106318d8332051a6e27651d9d7)
- Now that you know which modules are large, you can look for the dependencies. Visit the webpack analyzer homepage at: https://webpack.github.io/analyse/.
- Drag and drop the file or use the file selector to select compilation-stats.json.
- You should see the interface change after it loads the file. Click on the Modules line in the header.
- From here, you can see individual modules and where the dependencies are:
![](https://epubservercos.yuewen.com/C944E7/19470395501577006/epubprivate/OEBPS/Images/57357af1-24f0-4712-8d3e-6b37c7da9ffb.png?sign=1739296161-5PYJ6PT4trxxddnC1SkfJpMbEyTAMxR7-0-8b80add997af20f19315abc3b49193e8)