webpack可视化打包分析(webpack-bundle-an
2022-01-27 本文已影响0人
目鱼
title: webpack-bundle-analyzer
webpack打包分析图可视化
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 服务器以显示捆绑报告。 <br />在static模式下，将生成带有捆绑报告的单个 HTML 文件。<br />在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 |
{String 或者 function} |
默认值：返回漂亮打印的当前日期和时间的函数。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）。 |
statsOptions |
null或者{Object}
|
默认值：null。方法的选项stats.toJson()。例如，您可以使用source: false选项从统计文件中排除模块的来源。在此处查看更多选项。 |
excludeAssets |
{null 或者 pattern 或者 pattern[]}其中pattern等于{String 或者 RegExp 或者 function}
|
默认值：null。将用于匹配资产名称以将其从报告中排除的模式。如果 pattern 是一个字符串，它将通过new RegExp(str). 如果模式是一个函数，它应该具有以下签名(assetName: string) => boolean并且应该返回true排除匹配的资产。如果提供了多个模式，资产应至少匹配其中一个以被排除。 |
logLevel |
之一：info, warn, error,silent
|
默认值：info。用于控制插件输出多少细节。 |
