webpack-bundle-analyzer插件快速入门

前言

首先，这是一个webpack的插件，须要配合webpack和webpack-cli一块儿使用。这个插件的功能是生成代码分析报告，帮助提高代码质量和网站性能。

安装

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
复制代码

使用方法一

一、配置webpack.config.js文件：

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // 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
    // })
  ]
}
复制代码

二、配置package.json 文件

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}
复制代码

三、在命令行工具中输入npm run dev，按回车。

此时会打开浏览器，你将看到项目的分析图，大概长这样。

优势： 简单!
缺点： 每次运行打包命令时，都在本地起一个端口号为8888的本地服务器，并自动在浏览器中展现项目的分析结果。不够灵活，并非每次构建都想看代码分析！

使用方法二

一、配置webpack.config.js文件：

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展现打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ]
}
复制代码

二、配置package.json 文件

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 启动展现打包报告的http服务器
  }
}
复制代码

三、在命令行工具中，运行先npm run generateAnalyzFile命令，而后运行npm run analyz命令。 此时就能够看到分析结果了。

优势： 稍微复杂，可是灵活啊!
缺点： 每次运行命令时，都会在dist目录下生成一个stats.json文件。这个问题，能够将generateStatsFile属性设置为false，可是这样就没法生成stats.json文件了。解决办法：须要查看分析报告的时候设置为true，其他时候设置为false。

总结

本文仅仅作个最简单的演示，方便小白快速入门。关于这个插件的更多配置，请查看官方的文档。若有纰漏或疑问，欢迎在评论区或者私信我，我看到就会回复的。

官方文档连接：www.npmjs.com/package/web…