Access to the steps

Install dependencies

// NPM install webpack-bundle-Analyzer in NPM mode --save-dev // yarn mode yarn -d webpack-bundle-AnalyzerCopy the code

Configure the webpack.config.js file

Use environment variables to control whether to execute the plugin. See the official documentation for related configuration parameters

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports={ plugins: [//... other plugins configure process.env.Analyzer && new BundleAnalyzerPlugin() // Use default Settings]}Copy the code

Configure the package.json file

The commands are different for different projects and can be adjusted according to their own projects. Here is the analysis of the package after the build.

{
 "scripts": {
    "analyzer": "cross-env ENV_TYPE=staging ANALYZER=true node scripts/build.js"
  }
}
Copy the code

Execute the command

npm run analyzer
// or 
yarn analyzer
Copy the code

perform

The browser will automatically open 127.0.0.1:8888, and you can view the components of dependencies of related modules

Practical cases

Case 1: Find the same inventory in multiple versions

I found that three @ant-design/ ICONS modules were introduced. I used the NPM command to check the dependency status of the packages

npm list @ant-design/icons
Copy the code

The result: it really depends on the v4.2.2 and v4.4.0 versions of @ant-Design/ICONS

Solution: Upgrade @ant-design/ ICONS to version 4.4.0.

Re-installing the dependencies and re-examining them reveals that there are no more @ant-Design/ICONS modules introduced.

Continuously updated…