可视化构建包分析报告

一、webpack

webpack-bundle-analyzer

使用 webpack-bundle-analyzer 插件即可。

安装：npm install webpack-bundle-analyzer -D

语法：new BundleAnalyzerPlugin(options?: object)

Name	Type	Description
analyzerMode	其中一个：server, static, json, disabled	默认是: server。在服务器模式下，分析器将启动 HTTP 服务器来显示捆绑报告。在静态模式下，将生成带有捆绑包报告的单个 HTML 文件。在 JSON 模式下，将生成包含报告的单个 JSON 文件。在禁用模式下，您可以通过将 generateStatsFile 设置为 true 来使用这个插件生成 Webpack Stats JSON 文件。
AnalyzerHost	{ String }	默认值: 127.0.0.1. 在服务器模式下用于启动 HTTP 服务器的主机。
analyzerPort	{Number} or auto	默认值: 8888。端口，该端口将在服务器模式下用于启动 HTTP 服务器。如果 analyzerPort 是 auto，则操作系统将分配任意未使用的端口
analyzerUrl	{Function} 使用{ listenHost: string，listenHost: string，bound Address: server.address } . server.address 来自 Node.js	默认值: http://${ listenHost } : ${ bound Adresss.port }。以服务器模式打印到控制台的 URL。
reportFilename	{String}	默认值: report.html。以静态模式生成的绑定报表文件的路径。它可以是绝对路径，也可以是相对于 bundle 输出目录的路径(在 webpack config 中为 output.path)。
reportTitle	{String	function}
defaultSizes	stat, parsed, gzip 中的一个	默认情况下在报表中显示的模块大小。大小定义部分描述了这些值的含义。
openAnalyzer	{Boolean}	默认值: true。在默认浏览器中自动打开报表。
generateStatsFile	{Boolean}	默认值: false。如果为 true，webpack 统计数据 JSON 文件将在 bundle 输出目录中生成。
statsFilename	{String}	默认值: stats.json。如果 generateStatsFile 为 true，将生成 webpack 统计 JSON 文件的名称。它可以是绝对路径，也可以是相对于 bundle 输出目录的路径(在 webpack config 中为 output.path)。
statsOptions	null 或者 {Object}	默认值: null。ToJson ()方法的选项。例如，可以使用 source: false 选项从 stats 文件中排除模块的源。点击这里查看更多选项。
excludeAssets	{ null｜pattern｜pattern []}其中 pattern 等于{ String｜RegExp｜function }	默认值: null。将用于与资产名称匹配以从报表中排除它们的模式。如果 pattern 是一个字符串，它将通过 new RegExp (str)转换为 RegExp。如果 pattern 是一个函数，它应该具有以下签名(assetName: string) = > boolean，并且应该返回 true 以排除匹配的资产。如果提供多个模式，则资产应至少匹配其中一个以排除。
logLevel	info, warn, error, silent 中的一个	默认值: info。用于控制插件输出的详细信息。

配置webpack

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
		analyzerMode: "static",
        analyzerPort: 8888,
        reportFilename: "report.html",
        openAnalyzer: true,
        generateStatsFile: false,
	})
    // 默认配置的具体配置项
    // 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 文件

-V, --version 输出版本号
-m, --mode 分析器模式。应该是“server”、“static”或“ json”。
In server mode analyzer will start HTTP server to show bundle report.
In static mode single HTML file with bundle report will be generated.
In json mode single JSON file with bundle report will be generated. (default: server)
在“server”模式下，分析器将启动 HTTP 服务器来显示捆绑报告。
在“static”模式下，将生成包含报告的单个 HTML 文件。
在“json”模式下，将生成带有捆绑报告的单个 JSON 文件(默认值: 服务器)。
-h, --host 将在“server”模式下用于启动 HTTP 服务器的主机。(默认值: 127.0.0.1)
-p, --port 端口将用于在“server”模式启动 HTTP 服务器。应该是一个数字或“auto”(默认值: 8888)
-r, --report 将在“ static”模式下生成的绑定报告文件的路径(默认值: report.html)
-t, --title 在 html 报告的 title 元素中使用的字符串
-s, --default-sizes 默认情况下在树映射中显示的模块大小。
可能的值: stat、 parsed、 gzip (默认值: parsed)
-O, --no-open 不要在默认浏览器中自动打开报表。
-e, --exclude 应该从报告中排除的资产。
可以多次指定。
-l, --log-level 日志分级。
可能的值: 调试，信息，警告，错误，静默(默认值: 信息)
-h, --help 输出用量信息输出用量信息

{
	"scripts": {
		"build": "node build/build.js",
		"build:analyzer": "use_analyzer=true npm run build --report",
	}
}

效果：
执行命令：npm run build:analyzer

二、Rollup（vite）

使用 rollup-plugin-visualizer 插件即可。

安装：npm install -D rollup-plugin-visualizer

使用：

Name	Type	Description
filename	字符串，默认值取决于模板	要生成关系图的文件的名称。
title	字符串，默认汇总可视化工具	Title 标记值。
open	boolean, 默认值 false	在默认用户代理中打开生成的文件
template	string, 默认值 treemap	要使用哪种图表类型: sunburst, treemap, network, raw-data, list.
gzipSize	boolean, 默认值 false	从源代码中收集 gzip 大小并显示在图表中。
brotliSize	boolean, 默认值 false	从源代码中收集 brotli 大小并将其显示在图表中。

高级选项：

Name	Type	Description
emitFile	boolean, 默认值 false	使用 rollup 的 emitFile 生成文件。如果希望在一个位置控制所有输出(通过汇总输出选项) ，则使用。当它多次调用 vite 时，这对于 svelte 也很有用。
sourcemap	boolean, 默认值 false	使用源地图来计算大小(例如在 UglifyJs 或 Terser 之后)。始终添加插件作为最后一个选项。
projectRoot	string｜RegExp, 默认值 process.cwd()	这是文件的一些常见根路径，用于删除绝对文件路径。
include	Filter	Filter[], 默认值 undefined
exclude	Filter	Filter[], 默认值 undefined

过滤器类型是：{ bundle? : picomatchPattern，file? : picomatchPattern }

包含和排除的注意事项-如果 options.include 被省略或者长度为零，则过滤器在默认情况下将返回 true。否则，一个 ID 必须匹配一个或多个 picomatch 模式，而且不能匹配任何 options.exclude 模式。此条目将不包括在统计数据中。

配置vite

import { visualizer } from "rollup-plugin-visualizer";

module.exports = {
  plugins: [
  	visualizer({
		filename: './node_modules/.cache/report.html',
        open: true
	})
  ],
};

配置package.json 文件

{
	"scripts": {
		"build:only": "vite build",
		"build:mode": "vite build --mode report",
	}
}

效果：
执行命令：npm run build:mode