first commit

This commit is contained in:
monjack
2025-06-20 18:01:48 +08:00
commit 6daa6d65c1
24611 changed files with 2512443 additions and 0 deletions

View File

@ -0,0 +1,166 @@
"use strict";
const fs = require('fs');
const path = require('path');
const {
bold
} = require('picocolors');
const Logger = require('./Logger');
const viewer = require('./viewer');
const utils = require('./utils');
const {
writeStats
} = require('./statsUtils');
class BundleAnalyzerPlugin {
constructor(opts = {}) {
this.opts = {
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
reportFilename: null,
reportTitle: utils.defaultTitle,
defaultSizes: 'parsed',
openAnalyzer: true,
generateStatsFile: false,
statsFilename: 'stats.json',
statsOptions: null,
excludeAssets: null,
logLevel: 'info',
// deprecated
startAnalyzer: true,
analyzerUrl: utils.defaultAnalyzerUrl,
...opts,
analyzerPort: 'analyzerPort' in opts ? opts.analyzerPort === 'auto' ? 0 : opts.analyzerPort : 8888
};
this.server = null;
this.logger = new Logger(this.opts.logLevel);
}
apply(compiler) {
this.compiler = compiler;
const done = (stats, callback) => {
callback = callback || (() => {});
const actions = [];
if (this.opts.generateStatsFile) {
actions.push(() => this.generateStatsFile(stats.toJson(this.opts.statsOptions)));
} // Handling deprecated `startAnalyzer` flag
if (this.opts.analyzerMode === 'server' && !this.opts.startAnalyzer) {
this.opts.analyzerMode = 'disabled';
}
if (this.opts.analyzerMode === 'server') {
actions.push(() => this.startAnalyzerServer(stats.toJson()));
} else if (this.opts.analyzerMode === 'static') {
actions.push(() => this.generateStaticReport(stats.toJson()));
} else if (this.opts.analyzerMode === 'json') {
actions.push(() => this.generateJSONReport(stats.toJson()));
}
if (actions.length) {
// Making analyzer logs to be after all webpack logs in the console
setImmediate(async () => {
try {
await Promise.all(actions.map(action => action()));
callback();
} catch (e) {
callback(e);
}
});
} else {
callback();
}
};
if (compiler.hooks) {
compiler.hooks.done.tapAsync('webpack-bundle-analyzer', done);
} else {
compiler.plugin('done', done);
}
}
async generateStatsFile(stats) {
const statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
await fs.promises.mkdir(path.dirname(statsFilepath), {
recursive: true
});
try {
await writeStats(stats, statsFilepath);
this.logger.info(`${bold('Webpack Bundle Analyzer')} saved stats file to ${bold(statsFilepath)}`);
} catch (error) {
this.logger.error(`${bold('Webpack Bundle Analyzer')} error saving stats file to ${bold(statsFilepath)}: ${error}`);
}
}
async startAnalyzerServer(stats) {
if (this.server) {
(await this.server).updateChartData(stats);
} else {
this.server = viewer.startServer(stats, {
openBrowser: this.opts.openAnalyzer,
host: this.opts.analyzerHost,
port: this.opts.analyzerPort,
reportTitle: this.opts.reportTitle,
bundleDir: this.getBundleDirFromCompiler(),
logger: this.logger,
defaultSizes: this.opts.defaultSizes,
excludeAssets: this.opts.excludeAssets,
analyzerUrl: this.opts.analyzerUrl
});
}
}
async generateJSONReport(stats) {
await viewer.generateJSONReport(stats, {
reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.json'),
bundleDir: this.getBundleDirFromCompiler(),
logger: this.logger,
excludeAssets: this.opts.excludeAssets
});
}
async generateStaticReport(stats) {
await viewer.generateReport(stats, {
openBrowser: this.opts.openAnalyzer,
reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.html'),
reportTitle: this.opts.reportTitle,
bundleDir: this.getBundleDirFromCompiler(),
logger: this.logger,
defaultSizes: this.opts.defaultSizes,
excludeAssets: this.opts.excludeAssets
});
}
getBundleDirFromCompiler() {
if (typeof this.compiler.outputFileSystem.constructor === 'undefined') {
return this.compiler.outputPath;
}
switch (this.compiler.outputFileSystem.constructor.name) {
case 'MemoryFileSystem':
return null;
// Detect AsyncMFS used by Nuxt 2.5 that replaces webpack's MFS during development
// Related: #274
case 'AsyncMFS':
return null;
default:
return this.compiler.outputPath;
}
}
}
module.exports = BundleAnalyzerPlugin;

View File

@ -0,0 +1,38 @@
"use strict";
const LEVELS = ['debug', 'info', 'warn', 'error', 'silent'];
const LEVEL_TO_CONSOLE_METHOD = new Map([['debug', 'log'], ['info', 'log'], ['warn', 'log']]);
class Logger {
constructor(level = Logger.defaultLevel) {
this.activeLevels = new Set();
this.setLogLevel(level);
}
setLogLevel(level) {
const levelIndex = LEVELS.indexOf(level);
if (levelIndex === -1) throw new Error(`Invalid log level "${level}". Use one of these: ${LEVELS.join(', ')}`);
this.activeLevels.clear();
for (const [i, level] of LEVELS.entries()) {
if (i >= levelIndex) this.activeLevels.add(level);
}
}
_log(level, ...args) {
console[LEVEL_TO_CONSOLE_METHOD.get(level) || level](...args);
}
}
Logger.levels = LEVELS;
Logger.defaultLevel = 'info';
;
LEVELS.forEach(level => {
if (level === 'silent') return;
Logger.prototype[level] = function (...args) {
if (this.activeLevels.has(level)) this._log(level, ...args);
};
});
module.exports = Logger;

View File

@ -0,0 +1,280 @@
"use strict";
const fs = require('fs');
const path = require('path');
const gzipSize = require('gzip-size');
const {
parseChunked
} = require('@discoveryjs/json-ext');
const Logger = require('./Logger');
const Folder = require('./tree/Folder').default;
const {
parseBundle
} = require('./parseUtils');
const {
createAssetsFilter
} = require('./utils');
const FILENAME_QUERY_REGEXP = /\?.*$/u;
const FILENAME_EXTENSIONS = /\.(js|mjs|cjs)$/iu;
module.exports = {
getViewerData,
readStatsFromFile
};
function getViewerData(bundleStats, bundleDir, opts) {
const {
logger = new Logger(),
excludeAssets = null
} = opts || {};
const isAssetIncluded = createAssetsFilter(excludeAssets); // Sometimes all the information is located in `children` array (e.g. problem in #10)
if ((bundleStats.assets == null || bundleStats.assets.length === 0) && bundleStats.children && bundleStats.children.length > 0) {
const {
children
} = bundleStats;
bundleStats = bundleStats.children[0]; // Sometimes if there are additional child chunks produced add them as child assets,
// leave the 1st one as that is considered the 'root' asset.
for (let i = 1; i < children.length; i++) {
children[i].assets.forEach(asset => {
asset.isChild = true;
bundleStats.assets.push(asset);
});
}
} else if (bundleStats.children && bundleStats.children.length > 0) {
// Sometimes if there are additional child chunks produced add them as child assets
bundleStats.children.forEach(child => {
child.assets.forEach(asset => {
asset.isChild = true;
bundleStats.assets.push(asset);
});
});
} // Picking only `*.js, *.cjs or *.mjs` assets from bundle that has non-empty `chunks` array
bundleStats.assets = bundleStats.assets.filter(asset => {
// Filter out non 'asset' type asset if type is provided (Webpack 5 add a type to indicate asset types)
if (asset.type && asset.type !== 'asset') {
return false;
} // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
// See #22
asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
return FILENAME_EXTENSIONS.test(asset.name) && asset.chunks.length > 0 && isAssetIncluded(asset.name);
}); // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
let bundlesSources = null;
let parsedModules = null;
if (bundleDir) {
bundlesSources = {};
parsedModules = {};
for (const statAsset of bundleStats.assets) {
const assetFile = path.join(bundleDir, statAsset.name);
let bundleInfo;
try {
bundleInfo = parseBundle(assetFile);
} catch (err) {
const msg = err.code === 'ENOENT' ? 'no such file' : err.message;
logger.warn(`Error parsing bundle asset "${assetFile}": ${msg}`);
continue;
}
bundlesSources[statAsset.name] = {
src: bundleInfo.src,
runtimeSrc: bundleInfo.runtimeSrc
};
Object.assign(parsedModules, bundleInfo.modules);
}
if (Object.keys(bundlesSources).length === 0) {
bundlesSources = null;
parsedModules = null;
logger.warn('\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n');
}
}
const assets = bundleStats.assets.reduce((result, statAsset) => {
// If asset is a childAsset, then calculate appropriate bundle modules by looking through stats.children
const assetBundles = statAsset.isChild ? getChildAssetBundles(bundleStats, statAsset.name) : bundleStats;
const modules = assetBundles ? getBundleModules(assetBundles) : [];
const asset = result[statAsset.name] = {
size: statAsset.size
};
const assetSources = bundlesSources && Object.prototype.hasOwnProperty.call(bundlesSources, statAsset.name) ? bundlesSources[statAsset.name] : null;
if (assetSources) {
asset.parsedSize = Buffer.byteLength(assetSources.src);
asset.gzipSize = gzipSize.sync(assetSources.src);
} // Picking modules from current bundle script
let assetModules = modules.filter(statModule => assetHasModule(statAsset, statModule)); // Adding parsed sources
if (parsedModules) {
const unparsedEntryModules = [];
for (const statModule of assetModules) {
if (parsedModules[statModule.id]) {
statModule.parsedSrc = parsedModules[statModule.id];
} else if (isEntryModule(statModule)) {
unparsedEntryModules.push(statModule);
}
} // Webpack 5 changed bundle format and now entry modules are concatenated and located at the end of it.
// Because of this they basically become a concatenated module, for which we can't even precisely determine its
// parsed source as it's located in the same scope as all Webpack runtime helpers.
if (unparsedEntryModules.length && assetSources) {
if (unparsedEntryModules.length === 1) {
// So if there is only one entry we consider its parsed source to be all the bundle code excluding code
// from parsed modules.
unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc;
} else {
// If there are multiple entry points we move all of them under synthetic concatenated module.
assetModules = assetModules.filter(mod => !unparsedEntryModules.includes(mod));
assetModules.unshift({
identifier: './entry modules',
name: './entry modules',
modules: unparsedEntryModules,
size: unparsedEntryModules.reduce((totalSize, module) => totalSize + module.size, 0),
parsedSrc: assetSources.runtimeSrc
});
}
}
}
asset.modules = assetModules;
asset.tree = createModulesTree(asset.modules);
return result;
}, {});
const chunkToInitialByEntrypoint = getChunkToInitialByEntrypoint(bundleStats);
return Object.entries(assets).map(([filename, asset]) => {
var _chunkToInitialByEntr;
return {
label: filename,
isAsset: true,
// Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
// In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will
// be the size of minified bundle.
// Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)
statSize: asset.tree.size || asset.size,
parsedSize: asset.parsedSize,
gzipSize: asset.gzipSize,
groups: Object.values(asset.tree.children).map(i => i.toChartData()),
isInitialByEntrypoint: (_chunkToInitialByEntr = chunkToInitialByEntrypoint[filename]) !== null && _chunkToInitialByEntr !== void 0 ? _chunkToInitialByEntr : {}
};
});
}
function readStatsFromFile(filename) {
return parseChunked(fs.createReadStream(filename, {
encoding: 'utf8'
}));
}
function getChildAssetBundles(bundleStats, assetName) {
return flatten((bundleStats.children || []).find(c => Object.values(c.assetsByChunkName))).includes(assetName);
}
function getBundleModules(bundleStats) {
var _bundleStats$chunks;
const seenIds = new Set();
return flatten((((_bundleStats$chunks = bundleStats.chunks) === null || _bundleStats$chunks === void 0 ? void 0 : _bundleStats$chunks.map(chunk => chunk.modules)) || []).concat(bundleStats.modules).filter(Boolean)).filter(mod => {
// Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5)
if (isRuntimeModule(mod)) {
return false;
}
if (seenIds.has(mod.id)) {
return false;
}
seenIds.add(mod.id);
return true;
});
}
function assetHasModule(statAsset, statModule) {
// Checking if this module is the part of asset chunks
return (statModule.chunks || []).some(moduleChunk => statAsset.chunks.includes(moduleChunk));
}
function isEntryModule(statModule) {
return statModule.depth === 0;
}
function isRuntimeModule(statModule) {
return statModule.moduleType === 'runtime';
}
function createModulesTree(modules) {
const root = new Folder('.');
modules.forEach(module => root.addModule(module));
root.mergeNestedFolders();
return root;
}
function getChunkToInitialByEntrypoint(bundleStats) {
if (bundleStats == null) {
return {};
}
const chunkToEntrypointInititalMap = {};
Object.values(bundleStats.entrypoints || {}).forEach(entrypoint => {
for (const asset of entrypoint.assets) {
var _chunkToEntrypointIni;
chunkToEntrypointInititalMap[asset.name] = (_chunkToEntrypointIni = chunkToEntrypointInititalMap[asset.name]) !== null && _chunkToEntrypointIni !== void 0 ? _chunkToEntrypointIni : {};
chunkToEntrypointInititalMap[asset.name][entrypoint.name] = true;
}
});
return chunkToEntrypointInititalMap;
}
;
/**
* arr-flatten <https://github.com/jonschlinkert/arr-flatten>
*
* Copyright (c) 2014-2017, Jon Schlinkert.
* Released under the MIT License.
*
* Modified by Sukka <https://skk.moe>
*
* Replace recursively flatten with one-level deep flatten to match lodash.flatten
*
* TODO: replace with Array.prototype.flat once Node.js 10 support is dropped
*/
function flatten(arr) {
if (!arr) return [];
const len = arr.length;
if (!len) return [];
let cur;
const res = [];
for (let i = 0; i < len; i++) {
cur = arr[i];
if (Array.isArray(cur)) {
res.push(...cur);
} else {
res.push(cur);
}
}
return res;
}

View File

@ -0,0 +1,126 @@
#! /usr/bin/env node
"use strict";
const {
resolve,
dirname
} = require('path');
const commander = require('commander');
const {
magenta
} = require('picocolors');
const analyzer = require('../analyzer');
const viewer = require('../viewer');
const Logger = require('../Logger');
const utils = require('../utils');
const SIZES = new Set(['stat', 'parsed', 'gzip']);
const program = commander.version(require('../../package.json').version).usage(`<bundleStatsFile> [bundleDir] [options]
Arguments:
bundleStatsFile Path to Webpack Stats JSON file.
bundleDir Directory containing all generated bundles.
You should provided it if you want analyzer to show you the real parsed module sizes.
By default a directory of stats file is used.`).option('-m, --mode <mode>', 'Analyzer mode. Should be `server`,`static` or `json`.' + br('In `server` mode analyzer will start HTTP server to show bundle report.') + br('In `static` mode single HTML file with bundle report will be generated.') + br('In `json` mode single JSON file with bundle report will be generated.'), 'server').option( // Had to make `host` parameter optional in order to let `-h` flag output help message
// Fixes https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239
'-h, --host [host]', 'Host that will be used in `server` mode to start HTTP server.', '127.0.0.1').option('-p, --port <n>', 'Port that will be used in `server` mode to start HTTP server.', 8888).option('-r, --report <file>', 'Path to bundle report file that will be generated in `static` mode.').option('-t, --title <title>', 'String to use in title element of html report.').option('-s, --default-sizes <type>', 'Module sizes to show in treemap by default.' + br(`Possible values: ${[...SIZES].join(', ')}`), 'parsed').option('-O, --no-open', "Don't open report in default browser automatically.").option('-e, --exclude <regexp>', 'Assets that should be excluded from the report.' + br('Can be specified multiple times.'), array()).option('-l, --log-level <level>', 'Log level.' + br(`Possible values: ${[...Logger.levels].join(', ')}`), Logger.defaultLevel).parse(process.argv);
let [bundleStatsFile, bundleDir] = program.args;
let {
mode,
host,
port,
report: reportFilename,
title: reportTitle,
defaultSizes,
logLevel,
open: openBrowser,
exclude: excludeAssets
} = program.opts();
const logger = new Logger(logLevel);
if (typeof reportTitle === 'undefined') {
reportTitle = utils.defaultTitle;
}
if (!bundleStatsFile) showHelp('Provide path to Webpack Stats file as first argument');
if (mode !== 'server' && mode !== 'static' && mode !== 'json') {
showHelp('Invalid mode. Should be either `server`, `static` or `json`.');
}
if (mode === 'server') {
if (!host) showHelp('Invalid host name');
port = port === 'auto' ? 0 : Number(port);
if (isNaN(port)) showHelp('Invalid port. Should be a number or `auto`');
}
if (!SIZES.has(defaultSizes)) showHelp(`Invalid default sizes option. Possible values are: ${[...SIZES].join(', ')}`);
bundleStatsFile = resolve(bundleStatsFile);
if (!bundleDir) bundleDir = dirname(bundleStatsFile);
parseAndAnalyse(bundleStatsFile);
async function parseAndAnalyse(bundleStatsFile) {
try {
const bundleStats = await analyzer.readStatsFromFile(bundleStatsFile);
if (mode === 'server') {
viewer.startServer(bundleStats, {
openBrowser,
port,
host,
defaultSizes,
reportTitle,
bundleDir,
excludeAssets,
logger: new Logger(logLevel),
analyzerUrl: utils.defaultAnalyzerUrl
});
} else if (mode === 'static') {
viewer.generateReport(bundleStats, {
openBrowser,
reportFilename: resolve(reportFilename || 'report.html'),
reportTitle,
defaultSizes,
bundleDir,
excludeAssets,
logger: new Logger(logLevel)
});
} else if (mode === 'json') {
viewer.generateJSONReport(bundleStats, {
reportFilename: resolve(reportFilename || 'report.json'),
bundleDir,
excludeAssets,
logger: new Logger(logLevel)
});
}
} catch (err) {
logger.error(`Couldn't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
logger.debug(err.stack);
process.exit(1);
}
}
function showHelp(error) {
if (error) console.log(`\n ${magenta(error)}\n`);
program.outputHelp();
process.exit(1);
}
function br(str) {
return `\n${' '.repeat(28)}${str}`;
}
function array() {
const arr = [];
return val => {
arr.push(val);
return arr;
};
}

View File

@ -0,0 +1,10 @@
"use strict";
const {
start
} = require('./viewer');
module.exports = {
start,
BundleAnalyzerPlugin: require('./BundleAnalyzerPlugin')
};

View File

@ -0,0 +1,274 @@
"use strict";
const fs = require('fs');
const acorn = require('acorn');
const walk = require('acorn-walk');
module.exports = {
parseBundle
};
function parseBundle(bundlePath) {
const content = fs.readFileSync(bundlePath, 'utf8');
const ast = acorn.parse(content, {
sourceType: 'script',
// I believe in a bright future of ECMAScript!
// Actually, it's set to `2050` to support the latest ECMAScript version that currently exists.
// Seems like `acorn` supports such weird option value.
ecmaVersion: 2050
});
const walkState = {
locations: null,
expressionStatementDepth: 0
};
walk.recursive(ast, walkState, {
ExpressionStatement(node, state, c) {
if (state.locations) return;
state.expressionStatementDepth++;
if ( // Webpack 5 stores modules in the the top-level IIFE
state.expressionStatementDepth === 1 && ast.body.includes(node) && isIIFE(node)) {
const fn = getIIFECallExpression(node);
if ( // It should not contain neither arguments
fn.arguments.length === 0 && // ...nor parameters
fn.callee.params.length === 0) {
// Modules are stored in the very first variable declaration as hash
const firstVariableDeclaration = fn.callee.body.body.find(node => node.type === 'VariableDeclaration');
if (firstVariableDeclaration) {
for (const declaration of firstVariableDeclaration.declarations) {
if (declaration.init) {
state.locations = getModulesLocations(declaration.init);
if (state.locations) {
break;
}
}
}
}
}
}
if (!state.locations) {
c(node.expression, state);
}
state.expressionStatementDepth--;
},
AssignmentExpression(node, state) {
if (state.locations) return; // Modules are stored in exports.modules:
// exports.modules = {};
const {
left,
right
} = node;
if (left && left.object && left.object.name === 'exports' && left.property && left.property.name === 'modules' && isModulesHash(right)) {
state.locations = getModulesLocations(right);
}
},
CallExpression(node, state, c) {
if (state.locations) return;
const args = node.arguments; // Main chunk with webpack loader.
// Modules are stored in first argument:
// (function (...) {...})(<modules>)
if (node.callee.type === 'FunctionExpression' && !node.callee.id && args.length === 1 && isSimpleModulesList(args[0])) {
state.locations = getModulesLocations(args[0]);
return;
} // Async Webpack < v4 chunk without webpack loader.
// webpackJsonp([<chunks>], <modules>, ...)
// As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
if (node.callee.type === 'Identifier' && mayBeAsyncChunkArguments(args) && isModulesList(args[1])) {
state.locations = getModulesLocations(args[1]);
return;
} // Async Webpack v4 chunk without webpack loader.
// (window.webpackJsonp=window.webpackJsonp||[]).push([[<chunks>], <modules>, ...]);
// As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
if (isAsyncChunkPushExpression(node)) {
state.locations = getModulesLocations(args[0].elements[1]);
return;
} // Webpack v4 WebWorkerChunkTemplatePlugin
// globalObject.chunkCallbackName([<chunks>],<modules>, ...);
// Both globalObject and chunkCallbackName can be changed through the config, so we can't check them.
if (isAsyncWebWorkerChunkExpression(node)) {
state.locations = getModulesLocations(args[1]);
return;
} // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack
// features (e.g. `umd` library output) can wrap modules list into additional IIFE.
args.forEach(arg => c(arg, state));
}
});
const modules = {};
if (walkState.locations) {
Object.entries(walkState.locations).forEach(([id, loc]) => {
modules[id] = content.slice(loc.start, loc.end);
});
}
return {
modules,
src: content,
runtimeSrc: getBundleRuntime(content, walkState.locations)
};
}
/**
* Returns bundle source except modules
*/
function getBundleRuntime(content, modulesLocations) {
const sortedLocations = Object.values(modulesLocations || {}).sort((a, b) => a.start - b.start);
let result = '';
let lastIndex = 0;
for (const {
start,
end
} of sortedLocations) {
result += content.slice(lastIndex, start);
lastIndex = end;
}
return result + content.slice(lastIndex, content.length);
}
function isIIFE(node) {
return node.type === 'ExpressionStatement' && (node.expression.type === 'CallExpression' || node.expression.type === 'UnaryExpression' && node.expression.argument.type === 'CallExpression');
}
function getIIFECallExpression(node) {
if (node.expression.type === 'UnaryExpression') {
return node.expression.argument;
} else {
return node.expression;
}
}
function isModulesList(node) {
return isSimpleModulesList(node) || // Modules are contained in expression `Array([minimum ID]).concat([<module>, <module>, ...])`
isOptimizedModulesArray(node);
}
function isSimpleModulesList(node) {
return (// Modules are contained in hash. Keys are module ids.
isModulesHash(node) || // Modules are contained in array. Indexes are module ids.
isModulesArray(node)
);
}
function isModulesHash(node) {
return node.type === 'ObjectExpression' && node.properties.map(node => node.value).every(isModuleWrapper);
}
function isModulesArray(node) {
return node.type === 'ArrayExpression' && node.elements.every(elem => // Some of array items may be skipped because there is no module with such id
!elem || isModuleWrapper(elem));
}
function isOptimizedModulesArray(node) {
// Checking whether modules are contained in `Array(<minimum ID>).concat(...modules)` array:
// https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91
// The `<minimum ID>` + array indexes are module ids
return node.type === 'CallExpression' && node.callee.type === 'MemberExpression' && // Make sure the object called is `Array(<some number>)`
node.callee.object.type === 'CallExpression' && node.callee.object.callee.type === 'Identifier' && node.callee.object.callee.name === 'Array' && node.callee.object.arguments.length === 1 && isNumericId(node.callee.object.arguments[0]) && // Make sure the property X called for `Array(<some number>).X` is `concat`
node.callee.property.type === 'Identifier' && node.callee.property.name === 'concat' && // Make sure exactly one array is passed in to `concat`
node.arguments.length === 1 && isModulesArray(node.arguments[0]);
}
function isModuleWrapper(node) {
return (// It's an anonymous function expression that wraps module
(node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id || // If `DedupePlugin` is used it can be an ID of duplicated module...
isModuleId(node) || // or an array of shape [<module_id>, ...args]
node.type === 'ArrayExpression' && node.elements.length > 1 && isModuleId(node.elements[0])
);
}
function isModuleId(node) {
return node.type === 'Literal' && (isNumericId(node) || typeof node.value === 'string');
}
function isNumericId(node) {
return node.type === 'Literal' && Number.isInteger(node.value) && node.value >= 0;
}
function isChunkIds(node) {
// Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
return node.type === 'ArrayExpression' && node.elements.every(isModuleId);
}
function isAsyncChunkPushExpression(node) {
const {
callee,
arguments: args
} = node;
return callee.type === 'MemberExpression' && callee.property.name === 'push' && callee.object.type === 'AssignmentExpression' && args.length === 1 && args[0].type === 'ArrayExpression' && mayBeAsyncChunkArguments(args[0].elements) && isModulesList(args[0].elements[1]);
}
function mayBeAsyncChunkArguments(args) {
return args.length >= 2 && isChunkIds(args[0]);
}
function isAsyncWebWorkerChunkExpression(node) {
const {
callee,
type,
arguments: args
} = node;
return type === 'CallExpression' && callee.type === 'MemberExpression' && args.length === 2 && isChunkIds(args[0]) && isModulesList(args[1]);
}
function getModulesLocations(node) {
if (node.type === 'ObjectExpression') {
// Modules hash
const modulesNodes = node.properties;
return modulesNodes.reduce((result, moduleNode) => {
const moduleId = moduleNode.key.name || moduleNode.key.value;
result[moduleId] = getModuleLocation(moduleNode.value);
return result;
}, {});
}
const isOptimizedArray = node.type === 'CallExpression';
if (node.type === 'ArrayExpression' || isOptimizedArray) {
// Modules array or optimized array
const minId = isOptimizedArray ? // Get the [minId] value from the Array() call first argument literal value
node.callee.object.arguments[0].value : // `0` for simple array
0;
const modulesNodes = isOptimizedArray ? // The modules reside in the `concat()` function call arguments
node.arguments[0].elements : node.elements;
return modulesNodes.reduce((result, moduleNode, i) => {
if (moduleNode) {
result[i + minId] = getModuleLocation(moduleNode);
}
return result;
}, {});
}
return {};
}
function getModuleLocation(node) {
return {
start: node.start,
end: node.end
};
}

View File

@ -0,0 +1,90 @@
"use strict";
const {
createWriteStream
} = require('fs');
const {
Readable
} = require('stream');
class StatsSerializeStream extends Readable {
constructor(stats) {
super();
this._indentLevel = 0;
this._stringifier = this._stringify(stats);
}
get _indent() {
return ' '.repeat(this._indentLevel);
}
_read() {
let readMore = true;
while (readMore) {
const {
value,
done
} = this._stringifier.next();
if (done) {
this.push(null);
readMore = false;
} else {
readMore = this.push(value);
}
}
}
*_stringify(obj) {
if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || obj === null) {
yield JSON.stringify(obj);
} else if (Array.isArray(obj)) {
yield '[';
this._indentLevel++;
let isFirst = true;
for (let item of obj) {
if (item === undefined) {
item = null;
}
yield `${isFirst ? '' : ','}\n${this._indent}`;
yield* this._stringify(item);
isFirst = false;
}
this._indentLevel--;
yield obj.length ? `\n${this._indent}]` : ']';
} else {
yield '{';
this._indentLevel++;
let isFirst = true;
const entries = Object.entries(obj);
for (const [itemKey, itemValue] of entries) {
if (itemValue === undefined) {
continue;
}
yield `${isFirst ? '' : ','}\n${this._indent}${JSON.stringify(itemKey)}: `;
yield* this._stringify(itemValue);
isFirst = false;
}
this._indentLevel--;
yield entries.length ? `\n${this._indent}}` : '}';
}
}
}
exports.StatsSerializeStream = StatsSerializeStream;
exports.writeStats = writeStats;
async function writeStats(stats, filepath) {
return new Promise((resolve, reject) => {
new StatsSerializeStream(stats).on('end', resolve).on('error', reject).pipe(createWriteStream(filepath));
});
}

View File

@ -0,0 +1,77 @@
"use strict";
/* eslint-disable max-len */
const path = require('path');
const fs = require('fs');
const {
escape
} = require('html-escaper');
const projectRoot = path.resolve(__dirname, '..');
const assetsRoot = path.join(projectRoot, 'public');
exports.renderViewer = renderViewer;
/**
* Escapes `<` characters in JSON to safely use it in `<script>` tag.
*/
function escapeJson(json) {
return JSON.stringify(json).replace(/</gu, '\\u003c');
}
function getAssetContent(filename) {
const assetPath = path.join(assetsRoot, filename);
if (!assetPath.startsWith(assetsRoot)) {
throw new Error(`"${filename}" is outside of the assets root`);
}
return fs.readFileSync(assetPath, 'utf8');
}
function html(strings, ...values) {
return strings.map((string, index) => `${string}${values[index] || ''}`).join('');
}
function getScript(filename, mode) {
if (mode === 'static') {
return `<!-- ${escape(filename)} -->
<script>${getAssetContent(filename)}</script>`;
} else {
return `<script src="${escape(filename)}"></script>`;
}
}
function renderViewer({
title,
enableWebSocket,
chartData,
entrypoints,
defaultSizes,
mode
} = {}) {
return html`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>${escape(title)}</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script>
window.enableWebSocket = ${escapeJson(enableWebSocket)};
</script>
${getScript('viewer.js', mode)}
</head>
<body>
<div id="app"></div>
<script>
window.chartData = ${escapeJson(chartData)};
window.entrypoints = ${escapeJson(entrypoints)};
window.defaultSizes = ${escapeJson(defaultSizes)};
</script>
</body>
</html>`;
}

View File

@ -0,0 +1,125 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _Node = _interopRequireDefault(require("./Node"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class BaseFolder extends _Node.default {
constructor(name, parent) {
super(name, parent);
this.children = Object.create(null);
}
get src() {
if (!Object.prototype.hasOwnProperty.call(this, '_src')) {
this._src = this.walk((node, src) => src += node.src || '', '', false);
}
return this._src;
}
get size() {
if (!Object.prototype.hasOwnProperty.call(this, '_size')) {
this._size = this.walk((node, size) => size + node.size, 0, false);
}
return this._size;
}
getChild(name) {
return this.children[name];
}
addChildModule(module) {
const {
name
} = module;
const currentChild = this.children[name]; // For some reason we already have this node in children and it's a folder.
if (currentChild && currentChild instanceof BaseFolder) return;
if (currentChild) {
// We already have this node in children and it's a module.
// Merging it's data.
currentChild.mergeData(module.data);
} else {
// Pushing new module
module.parent = this;
this.children[name] = module;
}
delete this._size;
delete this._src;
}
addChildFolder(folder) {
folder.parent = this;
this.children[folder.name] = folder;
delete this._size;
delete this._src;
return folder;
}
walk(walker, state = {}, deep = true) {
let stopped = false;
Object.values(this.children).forEach(child => {
if (deep && child.walk) {
state = child.walk(walker, state, stop);
} else {
state = walker(child, state, stop);
}
if (stopped) return false;
});
return state;
function stop(finalState) {
stopped = true;
return finalState;
}
}
mergeNestedFolders() {
if (!this.isRoot) {
let childNames;
while ((childNames = Object.keys(this.children)).length === 1) {
const childName = childNames[0];
const onlyChild = this.children[childName];
if (onlyChild instanceof this.constructor) {
this.name += `/${onlyChild.name}`;
this.children = onlyChild.children;
} else {
break;
}
}
}
this.walk(child => {
child.parent = this;
if (child.mergeNestedFolders) {
child.mergeNestedFolders();
}
}, null, false);
}
toChartData() {
return {
label: this.name,
path: this.path,
statSize: this.size,
groups: Object.values(this.children).map(child => child.toChartData())
};
}
}
exports.default = BaseFolder;
;

View File

@ -0,0 +1,106 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _Module = _interopRequireDefault(require("./Module"));
var _ContentModule = _interopRequireDefault(require("./ContentModule"));
var _ContentFolder = _interopRequireDefault(require("./ContentFolder"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class ConcatenatedModule extends _Module.default {
constructor(name, data, parent) {
super(name, data, parent);
this.name += ' (concatenated)';
this.children = Object.create(null);
this.fillContentModules();
}
get parsedSize() {
var _this$getParsedSize;
return (_this$getParsedSize = this.getParsedSize()) !== null && _this$getParsedSize !== void 0 ? _this$getParsedSize : this.getEstimatedSize('parsedSize');
}
get gzipSize() {
var _this$getGzipSize;
return (_this$getGzipSize = this.getGzipSize()) !== null && _this$getGzipSize !== void 0 ? _this$getGzipSize : this.getEstimatedSize('gzipSize');
}
getEstimatedSize(sizeType) {
const parentModuleSize = this.parent[sizeType];
if (parentModuleSize !== undefined) {
return Math.floor(this.size / this.parent.size * parentModuleSize);
}
}
fillContentModules() {
this.data.modules.forEach(moduleData => this.addContentModule(moduleData));
}
addContentModule(moduleData) {
const pathParts = (0, _utils.getModulePathParts)(moduleData);
if (!pathParts) {
return;
}
const [folders, fileName] = [pathParts.slice(0, -1), pathParts[pathParts.length - 1]];
let currentFolder = this;
folders.forEach(folderName => {
let childFolder = currentFolder.getChild(folderName);
if (!childFolder) {
childFolder = currentFolder.addChildFolder(new _ContentFolder.default(folderName, this));
}
currentFolder = childFolder;
});
const ModuleConstructor = moduleData.modules ? ConcatenatedModule : _ContentModule.default;
const module = new ModuleConstructor(fileName, moduleData, this);
currentFolder.addChildModule(module);
}
getChild(name) {
return this.children[name];
}
addChildModule(module) {
module.parent = this;
this.children[module.name] = module;
}
addChildFolder(folder) {
folder.parent = this;
this.children[folder.name] = folder;
return folder;
}
mergeNestedFolders() {
Object.values(this.children).forEach(child => {
if (child.mergeNestedFolders) {
child.mergeNestedFolders();
}
});
}
toChartData() {
return { ...super.toChartData(),
concatenated: true,
groups: Object.values(this.children).map(child => child.toChartData())
};
}
}
exports.default = ConcatenatedModule;
;

View File

@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _BaseFolder = _interopRequireDefault(require("./BaseFolder"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class ContentFolder extends _BaseFolder.default {
constructor(name, ownerModule, parent) {
super(name, parent);
this.ownerModule = ownerModule;
}
get parsedSize() {
return this.getSize('parsedSize');
}
get gzipSize() {
return this.getSize('gzipSize');
}
getSize(sizeType) {
const ownerModuleSize = this.ownerModule[sizeType];
if (ownerModuleSize !== undefined) {
return Math.floor(this.size / this.ownerModule.size * ownerModuleSize);
}
}
toChartData() {
return { ...super.toChartData(),
parsedSize: this.parsedSize,
gzipSize: this.gzipSize,
inaccurateSizes: true
};
}
}
exports.default = ContentFolder;
;

View File

@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _Module = _interopRequireDefault(require("./Module"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class ContentModule extends _Module.default {
constructor(name, data, ownerModule, parent) {
super(name, data, parent);
this.ownerModule = ownerModule;
}
get parsedSize() {
return this.getSize('parsedSize');
}
get gzipSize() {
return this.getSize('gzipSize');
}
getSize(sizeType) {
const ownerModuleSize = this.ownerModule[sizeType];
if (ownerModuleSize !== undefined) {
return Math.floor(this.size / this.ownerModule.size * ownerModuleSize);
}
}
toChartData() {
return { ...super.toChartData(),
inaccurateSizes: true
};
}
}
exports.default = ContentModule;
;

View File

@ -0,0 +1,71 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _gzipSize = _interopRequireDefault(require("gzip-size"));
var _Module = _interopRequireDefault(require("./Module"));
var _BaseFolder = _interopRequireDefault(require("./BaseFolder"));
var _ConcatenatedModule = _interopRequireDefault(require("./ConcatenatedModule"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Folder extends _BaseFolder.default {
get parsedSize() {
return this.src ? this.src.length : 0;
}
get gzipSize() {
if (!Object.prototype.hasOwnProperty.call(this, '_gzipSize')) {
this._gzipSize = this.src ? _gzipSize.default.sync(this.src) : 0;
}
return this._gzipSize;
}
addModule(moduleData) {
const pathParts = (0, _utils.getModulePathParts)(moduleData);
if (!pathParts) {
return;
}
const [folders, fileName] = [pathParts.slice(0, -1), pathParts[pathParts.length - 1]];
let currentFolder = this;
folders.forEach(folderName => {
let childNode = currentFolder.getChild(folderName);
if ( // Folder is not created yet
!childNode || // In some situations (invalid usage of dynamic `require()`) webpack generates a module with empty require
// context, but it's moduleId points to a directory in filesystem.
// In this case we replace this `File` node with `Folder`.
// See `test/stats/with-invalid-dynamic-require.json` as an example.
!(childNode instanceof Folder)) {
childNode = currentFolder.addChildFolder(new Folder(folderName));
}
currentFolder = childNode;
});
const ModuleConstructor = moduleData.modules ? _ConcatenatedModule.default : _Module.default;
const module = new ModuleConstructor(fileName, moduleData, this);
currentFolder.addChildModule(module);
}
toChartData() {
return { ...super.toChartData(),
parsedSize: this.parsedSize,
gzipSize: this.gzipSize
};
}
}
exports.default = Folder;
;

View File

@ -0,0 +1,81 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _gzipSize = _interopRequireDefault(require("gzip-size"));
var _Node = _interopRequireDefault(require("./Node"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class Module extends _Node.default {
constructor(name, data, parent) {
super(name, parent);
this.data = data;
}
get src() {
return this.data.parsedSrc;
}
set src(value) {
this.data.parsedSrc = value;
delete this._gzipSize;
}
get size() {
return this.data.size;
}
set size(value) {
this.data.size = value;
}
get parsedSize() {
return this.getParsedSize();
}
get gzipSize() {
return this.getGzipSize();
}
getParsedSize() {
return this.src ? this.src.length : undefined;
}
getGzipSize() {
if (!('_gzipSize' in this)) {
this._gzipSize = this.src ? _gzipSize.default.sync(this.src) : undefined;
}
return this._gzipSize;
}
mergeData(data) {
if (data.size) {
this.size += data.size;
}
if (data.parsedSrc) {
this.src = (this.src || '') + data.parsedSrc;
}
}
toChartData() {
return {
id: this.data.id,
label: this.name,
path: this.path,
statSize: this.size,
parsedSize: this.parsedSize,
gzipSize: this.gzipSize
};
}
}
exports.default = Module;
;

View File

@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
class Node {
constructor(name, parent) {
this.name = name;
this.parent = parent;
}
get path() {
const path = [];
let node = this;
while (node) {
path.push(node.name);
node = node.parent;
}
return path.reverse().join('/');
}
get isRoot() {
return !this.parent;
}
}
exports.default = Node;
;

View File

@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getModulePathParts = getModulePathParts;
const MULTI_MODULE_REGEXP = /^multi /u;
function getModulePathParts(moduleData) {
if (MULTI_MODULE_REGEXP.test(moduleData.identifier)) {
return [moduleData.identifier];
}
const loaders = moduleData.name.split('!'); // Removing loaders from module path: they're joined by `!` and the last part is a raw module path
const parsedPath = loaders[loaders.length - 1] // Splitting module path into parts
.split('/') // Removing first `.`
.slice(1) // Replacing `~` with `node_modules`
.map(part => part === '~' ? 'node_modules' : part);
return parsedPath.length ? parsedPath : null;
}

View File

@ -0,0 +1,73 @@
"use strict";
const {
inspect,
types
} = require('util');
const opener = require('opener');
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
exports.createAssetsFilter = createAssetsFilter;
function createAssetsFilter(excludePatterns) {
const excludeFunctions = (Array.isArray(excludePatterns) ? excludePatterns : [excludePatterns]).filter(Boolean).map(pattern => {
if (typeof pattern === 'string') {
pattern = new RegExp(pattern, 'u');
}
if (types.isRegExp(pattern)) {
return asset => pattern.test(asset);
}
if (typeof pattern !== 'function') {
throw new TypeError(`Pattern should be either string, RegExp or a function, but "${inspect(pattern, {
depth: 0
})}" got.`);
}
return pattern;
});
if (excludeFunctions.length) {
return asset => excludeFunctions.every(fn => fn(asset) !== true);
} else {
return () => true;
}
}
/**
* @desc get string of current time
* format: dd/MMM HH:mm
* */
exports.defaultTitle = function () {
const time = new Date();
const year = time.getFullYear();
const month = MONTHS[time.getMonth()];
const day = time.getDate();
const hour = `0${time.getHours()}`.slice(-2);
const minute = `0${time.getMinutes()}`.slice(-2);
const currentTime = `${day} ${month} ${year} at ${hour}:${minute}`;
return `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${currentTime}]`;
};
exports.defaultAnalyzerUrl = function (options) {
const {
listenHost,
boundAddress
} = options;
return `http://${listenHost}:${boundAddress.port}`;
};
/**
* Calls opener on a URI, but silently try / catches it.
*/
exports.open = function (uri, logger) {
try {
opener(uri);
} catch (err) {
logger.debug(`Opener failed to open "${uri}":\n${err}`);
}
};

View File

@ -0,0 +1,220 @@
"use strict";
const path = require('path');
const fs = require('fs');
const http = require('http');
const WebSocket = require('ws');
const sirv = require('sirv');
const {
bold
} = require('picocolors');
const Logger = require('./Logger');
const analyzer = require('./analyzer');
const {
open
} = require('./utils');
const {
renderViewer
} = require('./template');
const projectRoot = path.resolve(__dirname, '..');
function resolveTitle(reportTitle) {
if (typeof reportTitle === 'function') {
return reportTitle();
} else {
return reportTitle;
}
}
module.exports = {
startServer,
generateReport,
generateJSONReport,
getEntrypoints,
// deprecated
start: startServer
};
async function startServer(bundleStats, opts) {
const {
port = 8888,
host = '127.0.0.1',
openBrowser = true,
bundleDir = null,
logger = new Logger(),
defaultSizes = 'parsed',
excludeAssets = null,
reportTitle,
analyzerUrl
} = opts || {};
const analyzerOpts = {
logger,
excludeAssets
};
let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
const entrypoints = getEntrypoints(bundleStats);
if (!chartData) return;
const sirvMiddleware = sirv(`${projectRoot}/public`, {
// disables caching and traverse the file system on every request
dev: true
});
const server = http.createServer((req, res) => {
if (req.method === 'GET' && req.url === '/') {
const html = renderViewer({
mode: 'server',
title: resolveTitle(reportTitle),
chartData,
entrypoints,
defaultSizes,
enableWebSocket: true
});
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end(html);
} else {
sirvMiddleware(req, res);
}
});
await new Promise(resolve => {
server.listen(port, host, () => {
resolve();
const url = analyzerUrl({
listenPort: port,
listenHost: host,
boundAddress: server.address()
});
logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
if (openBrowser) {
open(url, logger);
}
});
});
const wss = new WebSocket.Server({
server
});
wss.on('connection', ws => {
ws.on('error', err => {
// Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
if (err.errno) return;
logger.info(err.message);
});
});
return {
ws: wss,
http: server,
updateChartData
};
function updateChartData(bundleStats) {
const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
if (!newChartData) return;
chartData = newChartData;
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
event: 'chartDataUpdated',
data: newChartData
}));
}
});
}
}
async function generateReport(bundleStats, opts) {
const {
openBrowser = true,
reportFilename,
reportTitle,
bundleDir = null,
logger = new Logger(),
defaultSizes = 'parsed',
excludeAssets = null
} = opts || {};
const chartData = getChartData({
logger,
excludeAssets
}, bundleStats, bundleDir);
const entrypoints = getEntrypoints(bundleStats);
if (!chartData) return;
const reportHtml = renderViewer({
mode: 'static',
title: resolveTitle(reportTitle),
chartData,
entrypoints,
defaultSizes,
enableWebSocket: false
});
const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
fs.mkdirSync(path.dirname(reportFilepath), {
recursive: true
});
fs.writeFileSync(reportFilepath, reportHtml);
logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
if (openBrowser) {
open(`file://${reportFilepath}`, logger);
}
}
async function generateJSONReport(bundleStats, opts) {
const {
reportFilename,
bundleDir = null,
logger = new Logger(),
excludeAssets = null
} = opts || {};
const chartData = getChartData({
logger,
excludeAssets
}, bundleStats, bundleDir);
if (!chartData) return;
await fs.promises.mkdir(path.dirname(reportFilename), {
recursive: true
});
await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
}
function getChartData(analyzerOpts, ...args) {
let chartData;
const {
logger
} = analyzerOpts;
try {
chartData = analyzer.getViewerData(...args, analyzerOpts);
} catch (err) {
logger.error(`Could't analyze webpack bundle:\n${err}`);
logger.debug(err.stack);
chartData = null;
} // chartData can either be an array (bundleInfo[]) or null. It can't be an plain object anyway
if ( // analyzer.getViewerData() doesn't failed in the previous step
chartData && !Array.isArray(chartData)) {
logger.error("Could't find any javascript bundles in provided stats file");
chartData = null;
}
return chartData;
}
function getEntrypoints(bundleStats) {
if (bundleStats === null || bundleStats === undefined || !bundleStats.entrypoints) {
return [];
}
return Object.values(bundleStats.entrypoints).map(entrypoint => entrypoint.name);
}