ECMAScript Cookbook
上QQ阅读APP看书,第一时间看更新

How to do it...

  1. Open your command-line application and navigate to the directory containing the 02-creating-client-bundles package.
  2. 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
  1. 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/.
  2. Drag and drop the file or use the file selector to select compilation-stats.json.
  3. You should see a chart that will give you hoverable module size information:
  1. 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/.
  2. Drag and drop the file or use the file selector to select compilation-stats.json.
  3. You should see the interface change after it loads the file. Click on the Modules line in the header.
  4. From here, you can see individual modules and where the dependencies are: