webpack-bundle-analyzer 包分析工具的使用

webpack-bundle-analyzer 它将创建所有捆绑包内容的交互式树状图可视化。该模块将帮助您：
1.了解捆绑包中的真正内容
2.找出哪些模块占其大小的大部分
3.查找错误到达那里的模块
4.优化一下吧！

1、安装

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

2、用法（作为插件）

// 配置 webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
    // 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
    // })
  ]
}

3、然后直接启动项目就可以看到 它将创建所有捆绑包内容的交互式树状图可视化

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
// })

姓名	类型	描述
analyzerMode	其中之一: server, static, json, disabled	默认：server。在server模式下分析器将启动 HTTP 服务器来显示捆绑报告。在static模式下，将生成带有捆绑报告的单个 HTML 文件。在json模式下，将生成带有捆绑报告的单个 JSON 文件。在disabled模式下，您可以使用此插件通过设置为 来生成 Webpack Stats JSONgenerateStatsFile文件true。
analyzerHost	{String}	默认：127.0.0.1。将在模式下使用的主机server来启动 HTTP 服务器。
analyzerPort	{Number} 或者 auto	默认：8888。将在server启动 HTTP 服务器的模式下使用的端口。如果analyzerPort是auto，操作系统将分配任意未使用的端口
analyzerUrl	{Function} called with { listenHost: string, listenHost: string, boundAddress: server.address}. server.address comes from Node.js	默认：http://${listenHost}:${boundAddress.port}。使用服务器模式打印到控制台的 URL。
reportFilename	{String}	默认：report.html。将在 模式下生成的捆绑报告文件的路径static。它可以是绝对路径，也可以是相对于包输出目录的路径（即 webpack 配置中的 output.path）。
reportTitle	{String|function}	默认值：返回漂亮打印的当前日期和时间的函数。 HTMLtitle元素的内容；或() => string提供内容的形式的函数。
defaultSizes	其中之一: stat, parsed, gzip	默认：parsed。默认情况下在报告中显示的模块大小。尺寸定义部分描述了这些值的含义。
openAnalyzer	{Boolean}	默认：true。在默认浏览器中自动打开报告。
generateStatsFile	{Boolean}	默认：false。如果true，webpack stats JSON文件将在bundle输出目录中生成
statsFilename	{String}	默认：stats.json。如果generateStatsFile是，将生成的 webpack stats JSON 文件的名称true。它可以是绝对路径，也可以是相对于包输出目录的路径（即 webpack 配置中的 output.path）。
statsOptions	null 或者 {Object}	默认：null。方法选项stats.toJson()。例如，您可以使用选项从统计文件中排除模块的来源source: false。在这里查看更多选项.
excludeAssets	{null|pattern|pattern[]} 其中 pattern 等于 {String|RegExp|function}	默认：null。将用于匹配资产名称以将其从报告中排除的模式。如果模式是字符串，它将通过 转换为RegExp new RegExp(str)。如果模式是一个函数，它应该具有以下签名(assetName: string) => boolean，并且应该返回true以排除匹配的资产。如果提供了多种模式，资产应至少匹配其中一种才能被排除。
logLevel	其中之一: info, warn, error, silent	默认：info。用于控制插件输出多少细节。