447 lines
12 KiB
JavaScript
447 lines
12 KiB
JavaScript
// From https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/4abac503c789bac94118e5bbfc410686fb5112c7/src/parseUtils.js
|
|
// Modified by Guillaume Chau (Akryum)
|
|
|
|
const acorn = require('acorn')
|
|
const walk = require('acorn-walk')
|
|
const mapValues = require('lodash.mapvalues')
|
|
const zlib = require('zlib')
|
|
const { warn } = require('@vue/cli-shared-utils')
|
|
|
|
exports.analyzeBundle = function analyzeBundle (bundleStats, assetSources) {
|
|
// Picking only `*.js` assets from bundle that has non-empty `chunks` array
|
|
const jsAssets = []
|
|
const otherAssets = []
|
|
|
|
// Separate JS assets
|
|
bundleStats.assets.forEach(asset => {
|
|
if (asset.name.endsWith('.js') && asset.chunks && asset.chunks.length) {
|
|
jsAssets.push(asset)
|
|
} else {
|
|
otherAssets.push(asset)
|
|
}
|
|
})
|
|
|
|
// Trying to parse bundle assets and get real module sizes
|
|
let bundlesSources = null
|
|
let parsedModules = null
|
|
|
|
bundlesSources = {}
|
|
parsedModules = {}
|
|
|
|
for (const asset of jsAssets) {
|
|
const source = assetSources.get(asset.name)
|
|
let bundleInfo
|
|
|
|
try {
|
|
bundleInfo = parseBundle(source)
|
|
} catch (err) {
|
|
const msg = (err.code === 'ENOENT') ? 'no such file' : err.message
|
|
warn(`Error parsing bundle asset "${asset.fullPath}": ${msg}`)
|
|
continue
|
|
}
|
|
|
|
bundlesSources[asset.name] = bundleInfo.src
|
|
Object.assign(parsedModules, bundleInfo.modules)
|
|
}
|
|
|
|
if (!Object.keys(bundlesSources).length) {
|
|
bundlesSources = null
|
|
parsedModules = null
|
|
warn('\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n')
|
|
}
|
|
|
|
// Update sizes
|
|
|
|
bundleStats.modules.forEach(module => {
|
|
const parsedSrc = parsedModules && parsedModules[module.id]
|
|
module.size = {
|
|
stats: module.size
|
|
}
|
|
if (parsedSrc) {
|
|
module.size.parsed = parsedSrc.length
|
|
module.size.gzip = getGzipSize(parsedSrc)
|
|
} else {
|
|
module.size.parsed = module.size.stats
|
|
module.size.gzip = 0
|
|
}
|
|
})
|
|
|
|
jsAssets.forEach(asset => {
|
|
const src = bundlesSources && bundlesSources[asset.name]
|
|
asset.size = {
|
|
stats: asset.size
|
|
}
|
|
if (src) {
|
|
asset.size.parsed = src.length
|
|
asset.size.gzip = getGzipSize(src)
|
|
} else {
|
|
asset.size.parsed = asset.size.stats
|
|
asset.size.gzip = 0
|
|
}
|
|
}, {})
|
|
|
|
otherAssets.forEach(asset => {
|
|
const src = assetSources.get(asset.name)
|
|
asset.size = {
|
|
stats: asset.size,
|
|
parsed: asset.size
|
|
}
|
|
if (src) {
|
|
asset.size.gzip = getGzipSize(src)
|
|
} else {
|
|
asset.size.gzip = 0
|
|
}
|
|
})
|
|
}
|
|
|
|
function parseBundle (bundleContent) {
|
|
const ast = acorn.parse(bundleContent, {
|
|
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(n => n.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))
|
|
}
|
|
}
|
|
)
|
|
|
|
let modules
|
|
|
|
if (walkState.locations) {
|
|
modules = mapValues(walkState.locations,
|
|
loc => bundleContent.slice(loc.start, loc.end)
|
|
)
|
|
} else {
|
|
modules = {}
|
|
}
|
|
|
|
return {
|
|
modules: modules,
|
|
src: bundleContent,
|
|
runtimeSrc: getBundleRuntime(bundleContent, walkState.locations)
|
|
}
|
|
}
|
|
|
|
function getGzipSize (buffer) {
|
|
return zlib.gzipSync(buffer).length
|
|
}
|
|
|
|
/**
|
|
* 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(p => p.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 }
|
|
}
|