Skip to main content

webpack-bundle-analyzer

打包分析图可视化 webpack-bundle-analyzer

安装​

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

webpack.config.ts 采用 ts 文件。执行：

    npm i --save-dev @types/webpack-bundle-analyzer

webpack.config.ts 配置

...
import {BundleAnalyzerPlugin} from "webpack-bundle-analyzer";

  plugins: [
    ...

    new BundleAnalyzerPlugin()

    ...
  ]

参数 options ? 可选​

new BundleAnalyzerPlugin(options?: object)

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