webpack-bundle-analyzer 4.10.2 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -23
- package/lib/BundleAnalyzerPlugin.js +6 -27
- package/lib/Logger.js +2 -9
- package/lib/analyzer.js +53 -80
- package/lib/bin/analyzer.js +13 -21
- package/lib/index.js +0 -1
- package/lib/parseUtils.js +56 -74
- package/lib/sizeUtils.js +14 -0
- package/lib/statsUtils.js +0 -16
- package/lib/template.js +3 -10
- package/lib/tree/BaseFolder.js +3 -25
- package/lib/tree/ConcatenatedModule.js +11 -34
- package/lib/tree/ContentFolder.js +7 -12
- package/lib/tree/ContentModule.js +6 -12
- package/lib/tree/Folder.js +26 -28
- package/lib/tree/Module.js +20 -25
- package/lib/tree/Node.js +0 -7
- package/lib/tree/utils.js +8 -7
- package/lib/utils.js +2 -12
- package/lib/viewer.js +24 -34
- package/package.json +21 -22
- package/public/viewer.js +3 -3
- package/public/viewer.js.map +1 -1
package/lib/viewer.js
CHANGED
|
@@ -1,33 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
const path = require('path');
|
|
4
|
-
|
|
5
4
|
const fs = require('fs');
|
|
6
|
-
|
|
7
5
|
const http = require('http');
|
|
8
|
-
|
|
9
6
|
const WebSocket = require('ws');
|
|
10
|
-
|
|
11
7
|
const sirv = require('sirv');
|
|
12
|
-
|
|
13
8
|
const {
|
|
14
9
|
bold
|
|
15
10
|
} = require('picocolors');
|
|
16
|
-
|
|
17
11
|
const Logger = require('./Logger');
|
|
18
|
-
|
|
19
12
|
const analyzer = require('./analyzer');
|
|
20
|
-
|
|
21
13
|
const {
|
|
22
14
|
open
|
|
23
15
|
} = require('./utils');
|
|
24
|
-
|
|
25
16
|
const {
|
|
26
17
|
renderViewer
|
|
27
18
|
} = require('./template');
|
|
28
|
-
|
|
29
19
|
const projectRoot = path.resolve(__dirname, '..');
|
|
30
|
-
|
|
31
20
|
function resolveTitle(reportTitle) {
|
|
32
21
|
if (typeof reportTitle === 'function') {
|
|
33
22
|
return reportTitle();
|
|
@@ -35,7 +24,10 @@ function resolveTitle(reportTitle) {
|
|
|
35
24
|
return reportTitle;
|
|
36
25
|
}
|
|
37
26
|
}
|
|
38
|
-
|
|
27
|
+
function resolveDefaultSizes(defaultSizes, compressionAlgorithm) {
|
|
28
|
+
if (['gzip', 'brotli'].includes(defaultSizes)) return compressionAlgorithm;
|
|
29
|
+
return defaultSizes;
|
|
30
|
+
}
|
|
39
31
|
module.exports = {
|
|
40
32
|
startServer,
|
|
41
33
|
generateReport,
|
|
@@ -44,7 +36,6 @@ module.exports = {
|
|
|
44
36
|
// deprecated
|
|
45
37
|
start: startServer
|
|
46
38
|
};
|
|
47
|
-
|
|
48
39
|
async function startServer(bundleStats, opts) {
|
|
49
40
|
const {
|
|
50
41
|
port = 8888,
|
|
@@ -53,13 +44,15 @@ async function startServer(bundleStats, opts) {
|
|
|
53
44
|
bundleDir = null,
|
|
54
45
|
logger = new Logger(),
|
|
55
46
|
defaultSizes = 'parsed',
|
|
47
|
+
compressionAlgorithm,
|
|
56
48
|
excludeAssets = null,
|
|
57
49
|
reportTitle,
|
|
58
50
|
analyzerUrl
|
|
59
51
|
} = opts || {};
|
|
60
52
|
const analyzerOpts = {
|
|
61
53
|
logger,
|
|
62
|
-
excludeAssets
|
|
54
|
+
excludeAssets,
|
|
55
|
+
compressionAlgorithm
|
|
63
56
|
};
|
|
64
57
|
let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
|
|
65
58
|
const entrypoints = getEntrypoints(bundleStats);
|
|
@@ -75,7 +68,8 @@ async function startServer(bundleStats, opts) {
|
|
|
75
68
|
title: resolveTitle(reportTitle),
|
|
76
69
|
chartData,
|
|
77
70
|
entrypoints,
|
|
78
|
-
defaultSizes,
|
|
71
|
+
defaultSizes: resolveDefaultSizes(defaultSizes, compressionAlgorithm),
|
|
72
|
+
compressionAlgorithm,
|
|
79
73
|
enableWebSocket: true
|
|
80
74
|
});
|
|
81
75
|
res.writeHead(200, {
|
|
@@ -95,7 +89,6 @@ async function startServer(bundleStats, opts) {
|
|
|
95
89
|
boundAddress: server.address()
|
|
96
90
|
});
|
|
97
91
|
logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
|
|
98
|
-
|
|
99
92
|
if (openBrowser) {
|
|
100
93
|
open(url, logger);
|
|
101
94
|
}
|
|
@@ -116,7 +109,6 @@ async function startServer(bundleStats, opts) {
|
|
|
116
109
|
http: server,
|
|
117
110
|
updateChartData
|
|
118
111
|
};
|
|
119
|
-
|
|
120
112
|
function updateChartData(bundleStats) {
|
|
121
113
|
const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
|
|
122
114
|
if (!newChartData) return;
|
|
@@ -131,7 +123,6 @@ async function startServer(bundleStats, opts) {
|
|
|
131
123
|
});
|
|
132
124
|
}
|
|
133
125
|
}
|
|
134
|
-
|
|
135
126
|
async function generateReport(bundleStats, opts) {
|
|
136
127
|
const {
|
|
137
128
|
openBrowser = true,
|
|
@@ -140,11 +131,13 @@ async function generateReport(bundleStats, opts) {
|
|
|
140
131
|
bundleDir = null,
|
|
141
132
|
logger = new Logger(),
|
|
142
133
|
defaultSizes = 'parsed',
|
|
134
|
+
compressionAlgorithm,
|
|
143
135
|
excludeAssets = null
|
|
144
136
|
} = opts || {};
|
|
145
137
|
const chartData = getChartData({
|
|
146
138
|
logger,
|
|
147
|
-
excludeAssets
|
|
139
|
+
excludeAssets,
|
|
140
|
+
compressionAlgorithm
|
|
148
141
|
}, bundleStats, bundleDir);
|
|
149
142
|
const entrypoints = getEntrypoints(bundleStats);
|
|
150
143
|
if (!chartData) return;
|
|
@@ -153,7 +146,8 @@ async function generateReport(bundleStats, opts) {
|
|
|
153
146
|
title: resolveTitle(reportTitle),
|
|
154
147
|
chartData,
|
|
155
148
|
entrypoints,
|
|
156
|
-
defaultSizes,
|
|
149
|
+
defaultSizes: resolveDefaultSizes(defaultSizes, compressionAlgorithm),
|
|
150
|
+
compressionAlgorithm,
|
|
157
151
|
enableWebSocket: false
|
|
158
152
|
});
|
|
159
153
|
const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
|
|
@@ -162,22 +156,22 @@ async function generateReport(bundleStats, opts) {
|
|
|
162
156
|
});
|
|
163
157
|
fs.writeFileSync(reportFilepath, reportHtml);
|
|
164
158
|
logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
|
|
165
|
-
|
|
166
159
|
if (openBrowser) {
|
|
167
160
|
open(`file://${reportFilepath}`, logger);
|
|
168
161
|
}
|
|
169
162
|
}
|
|
170
|
-
|
|
171
163
|
async function generateJSONReport(bundleStats, opts) {
|
|
172
164
|
const {
|
|
173
165
|
reportFilename,
|
|
174
166
|
bundleDir = null,
|
|
175
167
|
logger = new Logger(),
|
|
176
|
-
excludeAssets = null
|
|
168
|
+
excludeAssets = null,
|
|
169
|
+
compressionAlgorithm
|
|
177
170
|
} = opts || {};
|
|
178
171
|
const chartData = getChartData({
|
|
179
172
|
logger,
|
|
180
|
-
excludeAssets
|
|
173
|
+
excludeAssets,
|
|
174
|
+
compressionAlgorithm
|
|
181
175
|
}, bundleStats, bundleDir);
|
|
182
176
|
if (!chartData) return;
|
|
183
177
|
await fs.promises.mkdir(path.dirname(reportFilename), {
|
|
@@ -186,35 +180,31 @@ async function generateJSONReport(bundleStats, opts) {
|
|
|
186
180
|
await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
|
|
187
181
|
logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
|
|
188
182
|
}
|
|
189
|
-
|
|
190
183
|
function getChartData(analyzerOpts, ...args) {
|
|
191
184
|
let chartData;
|
|
192
185
|
const {
|
|
193
186
|
logger
|
|
194
187
|
} = analyzerOpts;
|
|
195
|
-
|
|
196
188
|
try {
|
|
197
189
|
chartData = analyzer.getViewerData(...args, analyzerOpts);
|
|
198
190
|
} catch (err) {
|
|
199
|
-
logger.error(`
|
|
191
|
+
logger.error(`Couldn't analyze webpack bundle:\n${err}`);
|
|
200
192
|
logger.debug(err.stack);
|
|
201
193
|
chartData = null;
|
|
202
|
-
}
|
|
203
|
-
|
|
194
|
+
}
|
|
204
195
|
|
|
205
|
-
|
|
196
|
+
// chartData can either be an array (bundleInfo[]) or null. It can't be an plain object anyway
|
|
197
|
+
if (
|
|
198
|
+
// analyzer.getViewerData() doesn't failed in the previous step
|
|
206
199
|
chartData && !Array.isArray(chartData)) {
|
|
207
|
-
logger.error("
|
|
200
|
+
logger.error("Couldn't find any javascript bundles in provided stats file");
|
|
208
201
|
chartData = null;
|
|
209
202
|
}
|
|
210
|
-
|
|
211
203
|
return chartData;
|
|
212
204
|
}
|
|
213
|
-
|
|
214
205
|
function getEntrypoints(bundleStats) {
|
|
215
206
|
if (bundleStats === null || bundleStats === undefined || !bundleStats.entrypoints) {
|
|
216
207
|
return [];
|
|
217
208
|
}
|
|
218
|
-
|
|
219
209
|
return Object.values(bundleStats.entrypoints).map(entrypoint => entrypoint.name);
|
|
220
210
|
}
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "webpack-bundle-analyzer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
|
|
5
5
|
"author": "Yury Grunin <grunin.ya@ya.ru>",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"homepage": "https://github.com/webpack
|
|
8
|
-
"changelog": "https://github.com/webpack
|
|
7
|
+
"homepage": "https://github.com/webpack/webpack-bundle-analyzer",
|
|
8
|
+
"changelog": "https://github.com/webpack/webpack-bundle-analyzer/blob/main/CHANGELOG.md",
|
|
9
9
|
"bugs": {
|
|
10
|
-
"url": "https://github.com/webpack
|
|
10
|
+
"url": "https://github.com/webpack/webpack-bundle-analyzer/issues"
|
|
11
11
|
},
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
14
|
-
"url": "git+https://github.com/webpack
|
|
14
|
+
"url": "git+https://github.com/webpack/webpack-bundle-analyzer.git"
|
|
15
15
|
},
|
|
16
16
|
"main": "lib/index.js",
|
|
17
17
|
"bin": "lib/bin/analyzer.js",
|
|
18
18
|
"engines": {
|
|
19
|
-
"node": ">=
|
|
19
|
+
"node": ">= 20.9.0"
|
|
20
20
|
},
|
|
21
21
|
"packageManager": "npm@6.14.8",
|
|
22
22
|
"scripts": {
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"npm-publish": "npm run lint && npm run build && npm test && npm publish",
|
|
26
26
|
"lint": "eslint --ext js,jsx .",
|
|
27
27
|
"install-test-webpack-versions": "./bin/install-test-webpack-versions.sh",
|
|
28
|
-
"test": "npm run install-test-webpack-versions && jest --runInBand",
|
|
29
|
-
"test-dev": "npm run install-test-webpack-versions && jest --watch --runInBand"
|
|
28
|
+
"test": "npm run install-test-webpack-versions && NODE_OPTIONS=--openssl-legacy-provider jest --runInBand",
|
|
29
|
+
"test-dev": "npm run install-test-webpack-versions && NODE_OPTIONS=--openssl-legacy-provider jest --watch --runInBand"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
32
|
"public",
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
"commander": "^7.2.0",
|
|
40
40
|
"debounce": "^1.2.1",
|
|
41
41
|
"escape-string-regexp": "^4.0.0",
|
|
42
|
-
"gzip-size": "^6.0.0",
|
|
43
42
|
"html-escaper": "^2.0.2",
|
|
44
43
|
"opener": "^1.5.2",
|
|
45
44
|
"picocolors": "^1.0.0",
|
|
@@ -47,17 +46,17 @@
|
|
|
47
46
|
"ws": "^7.3.1"
|
|
48
47
|
},
|
|
49
48
|
"devDependencies": {
|
|
50
|
-
"@babel/core": "7.
|
|
51
|
-
"@babel/plugin-proposal-
|
|
52
|
-
"@babel/plugin-
|
|
53
|
-
"@babel/plugin-transform-runtime": "7.
|
|
54
|
-
"@babel/preset-env": "7.
|
|
55
|
-
"@babel/preset-react": "7.
|
|
56
|
-
"@babel/runtime": "7.
|
|
49
|
+
"@babel/core": "7.26.9",
|
|
50
|
+
"@babel/plugin-proposal-decorators": "7.25.9",
|
|
51
|
+
"@babel/plugin-transform-class-properties": "^7.27.1",
|
|
52
|
+
"@babel/plugin-transform-runtime": "7.26.9",
|
|
53
|
+
"@babel/preset-env": "7.26.9",
|
|
54
|
+
"@babel/preset-react": "7.26.3",
|
|
55
|
+
"@babel/runtime": "7.26.9",
|
|
57
56
|
"@carrotsearch/foamtree": "3.5.0",
|
|
58
57
|
"autoprefixer": "10.2.5",
|
|
59
58
|
"babel-eslint": "10.1.0",
|
|
60
|
-
"babel-loader": "
|
|
59
|
+
"babel-loader": "9.2.1",
|
|
61
60
|
"babel-plugin-lodash": "3.3.4",
|
|
62
61
|
"chai": "4.3.4",
|
|
63
62
|
"chai-subset": "1.6.0",
|
|
@@ -74,7 +73,7 @@
|
|
|
74
73
|
"globby": "11.0.3",
|
|
75
74
|
"gulp": "4.0.2",
|
|
76
75
|
"gulp-babel": "8.0.0",
|
|
77
|
-
"jest": "
|
|
76
|
+
"jest": "^30.2.0",
|
|
78
77
|
"lodash.memoize": "^4.1.2",
|
|
79
78
|
"lodash.merge": "^4.6.2",
|
|
80
79
|
"lodash.partial": "^4.2.1",
|
|
@@ -84,14 +83,14 @@
|
|
|
84
83
|
"postcss-icss-values": "2.0.2",
|
|
85
84
|
"postcss-loader": "5.3.0",
|
|
86
85
|
"preact": "10.5.13",
|
|
87
|
-
"puppeteer": "
|
|
86
|
+
"puppeteer": "^24.30.0",
|
|
88
87
|
"stream-combiner2": "1.1.1",
|
|
89
88
|
"style-loader": "2.0.0",
|
|
90
89
|
"terser-webpack-plugin": "5.1.2",
|
|
91
90
|
"url-loader": "4.1.1",
|
|
92
|
-
"webpack": "5.
|
|
93
|
-
"webpack-cli": "
|
|
94
|
-
"webpack-dev-server": "
|
|
91
|
+
"webpack": "5.98.0",
|
|
92
|
+
"webpack-cli": "6.0.1",
|
|
93
|
+
"webpack-dev-server": "5.2.0"
|
|
95
94
|
},
|
|
96
95
|
"keywords": [
|
|
97
96
|
"webpack",
|