
上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:

- 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:
