preface

First, this is a webPack plug-in that needs to work with WebPack and WebPack-CLI. The function of this plug-in is to generate code analysis reports to help improve code quality and website performance.

The installation

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
Copy the code

Usage Method 1

1. Configure the webpack.config.js file:

/ / webpack. Config. Js file

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // Use the default Settings
    // Specifies the default configuration item
    // new BundleAnalyzerPlugin({
    // analyzerMode: 'server',
    / / analyzerHost: '127.0.0.1,
    // analyzerPort: '8888',
    // reportFilename: 'report.html',
    // defaultSizes: 'parsed',
    // openAnalyzer: true,
    // generateStatsFile: false,
    // statsFilename: 'stats.json',
    // statsOptions: null,
    // excludeAssets: null,
    // logLevel: info
    // })]}Copy the code

2. Configure the package.json file

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"}}Copy the code

3. On the cli, enter NPM run dev and press Enter.

The browser will open and you’ll see a diagram of the project that looks something like this.

Pros: Simple! Disadvantages: Each time you run a package command, a local server with port number 8888 is started locally and the analysis results of the project are automatically displayed in the browser. Not flexible enough, you don’t want to see code analysis every build!

Usage Method 2

1. Configure the webpack.config.js file:

/ / webpack. Config. Js file

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled'.// Do not start the HTTP server that displays packaged reports
      generateStatsFile: true.// Whether to generate stats.json file]}}),Copy the code

2. Configure the package.json file

{"generateAnalyzFile": "webpack --profile --json > stats.json", // generate analysis file "analyz": "Webpack-bundle-analyzer --port 8888./dist/stats.json" // Start the HTTP server that displays the packaged report}}Copy the code

3. On the CLI, run the NPM run generateAnalyzFile command and then run the NPM run analyz command. Now you can see the results of your analysis.

Pros: Slightly complex, but flexible! Cons: A stats.json file is generated in the dist directory each time the command is run. The generateStatsFile property can be set to false, but the stats.json file cannot be generated. Solution: Set this parameter to true when you need to view the analysis report, and to false the rest of the time.

conclusion

This article only makes a simple demonstration, convenient small white quick start. For more on the configuration of this plug-in, check out the official documentation. If you have any questions or omissions, please feel free to write to me in the comments section or in a private message. I will reply as soon as I see them.

Official document links: www.npmjs.com/package/web…