123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328 |
- // From https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/ba3dbd71cec7becec0fbf529833204425f66efde/src/parseUtils.js
- // Modified by Guillaume Chau (Akryum)
- const acorn = require('acorn')
- const walk = require('acorn-walk')
- const mapValues = require('lodash.mapvalues')
- const transform = require('lodash.transform')
- 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) {
- bundleInfo = null
- }
- if (!bundleInfo) {
- warn(
- `\nCouldn't parse bundle asset "${asset.fullPath}".\n` +
- 'Analyzer will use module sizes from stats file.\n'
- )
- parsedModules = null
- bundlesSources = null
- break
- }
- bundlesSources[asset.name] = bundleInfo.src
- Object.assign(parsedModules, bundleInfo.modules)
- }
- // 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
- }
- walk.recursive(
- ast,
- walkState,
- {
- CallExpression (node, state, c) {
- if (state.sizes) return
- const args = node.arguments
- // Additional bundle without webpack loader.
- // Modules are stored in second argument, after chunk ids:
- // 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' &&
- args.length >= 2 &&
- isArgumentContainsChunkIds(args[0]) &&
- isArgumentContainsModulesList(args[1])
- ) {
- state.locations = getModulesLocationFromFunctionArgument(args[1])
- return
- }
- // Additional bundle without webpack loader, with module IDs optimized.
- // Modules are stored in second arguments Array(n).concat() call
- // webpackJsonp([<chunks>], Array([minimum ID]).concat([<module>, <module>, ...]))
- // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
- if (
- node.callee.type === 'Identifier' &&
- (args.length === 2 || args.length === 3) &&
- isArgumentContainsChunkIds(args[0]) &&
- isArgumentArrayConcatContainingChunks(args[1])
- ) {
- state.locations = getModulesLocationFromArrayConcat(args[1])
- return
- }
- // Main bundle with webpack loader
- // Modules are stored in first argument:
- // (function (...) {...})(<modules>)
- if (
- node.callee.type === 'FunctionExpression' &&
- !node.callee.id &&
- args.length === 1 &&
- isArgumentContainsModulesList(args[0])
- ) {
- state.locations = getModulesLocationFromFunctionArgument(args[0])
- return
- }
- // Additional bundles with webpack 4 are loaded with:
- // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
- if (
- isWindowPropertyPushExpression(node) &&
- args.length === 1 &&
- isArgumentContainingChunkIdsAndModulesList(args[0])
- ) {
- state.locations = getModulesLocationFromFunctionArgument(args[0].elements[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))
- }
- }
- )
- if (!walkState.locations) {
- return null
- }
- return {
- src: bundleContent,
- modules: mapValues(walkState.locations,
- loc => bundleContent.slice(loc.start, loc.end)
- )
- }
- }
- function getGzipSize (buffer) {
- return zlib.gzipSync(buffer).length
- }
- function isArgumentContainsChunkIds (arg) {
- // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
- return (arg.type === 'ArrayExpression' && arg.elements.every(isModuleId))
- }
- function isArgumentContainsModulesList (arg) {
- if (arg.type === 'ObjectExpression') {
- return arg.properties
- .map(prop => prop.value)
- .every(isModuleWrapper)
- }
- if (arg.type === 'ArrayExpression') {
- // Modules are contained in array.
- // Array indexes are module ids
- return arg.elements.every(elem =>
- // Some of array items may be skipped because there is no module with such id
- !elem ||
- isModuleWrapper(elem)
- )
- }
- return false
- }
- function isArgumentContainingChunkIdsAndModulesList (arg) {
- if (
- arg.type === 'ArrayExpression' &&
- arg.elements.length >= 2 &&
- isArgumentContainsChunkIds(arg.elements[0]) &&
- isArgumentContainsModulesList(arg.elements[1])
- ) {
- return true
- }
- return false
- }
- function isArgumentArrayConcatContainingChunks (arg) {
- if (
- arg.type === 'CallExpression' &&
- arg.callee.type === 'MemberExpression' &&
- // Make sure the object called is `Array(<some number>)`
- arg.callee.object.type === 'CallExpression' &&
- arg.callee.object.callee.type === 'Identifier' &&
- arg.callee.object.callee.name === 'Array' &&
- arg.callee.object.arguments.length === 1 &&
- isNumericId(arg.callee.object.arguments[0]) &&
- // Make sure the property X called for `Array(<some number>).X` is `concat`
- arg.callee.property.type === 'Identifier' &&
- arg.callee.property.name === 'concat' &&
- // Make sure exactly one array is passed in to `concat`
- arg.arguments.length === 1 &&
- arg.arguments[0].type === 'ArrayExpression'
- ) {
- // Modules are contained in `Array(<minimum ID>).concat(` array:
- // https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91
- // The `<minimum ID>` + array indexes are module ids
- return true
- }
- return false
- }
- function isWindowPropertyPushExpression (node) {
- return node.callee.type === 'MemberExpression' &&
- node.callee.property.name === 'push' &&
- node.callee.object.type === 'AssignmentExpression' &&
- node.callee.object.left.object.name === 'window'
- }
- 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 getModulesLocationFromFunctionArgument (arg) {
- if (arg.type === 'ObjectExpression') {
- const modulesNodes = arg.properties
- return transform(modulesNodes, (result, moduleNode) => {
- const moduleId = moduleNode.key.name || moduleNode.key.value
- result[moduleId] = getModuleLocation(moduleNode.value)
- }, {})
- }
- if (arg.type === 'ArrayExpression') {
- const modulesNodes = arg.elements
- return transform(modulesNodes, (result, moduleNode, i) => {
- if (!moduleNode) return
- result[i] = getModuleLocation(moduleNode)
- }, {})
- }
- return {}
- }
- function getModulesLocationFromArrayConcat (arg) {
- // arg(CallExpression) =
- // Array([minId]).concat([<minId module>, <minId+1 module>, ...])
- //
- // Get the [minId] value from the Array() call first argument literal value
- const minId = arg.callee.object.arguments[0].value
- // The modules reside in the `concat()` function call arguments
- const modulesNodes = arg.arguments[0].elements
- return transform(modulesNodes, (result, moduleNode, i) => {
- if (!moduleNode) return
- result[i + minId] = getModuleLocation(moduleNode)
- }, {})
- }
- function getModuleLocation (node) {
- return { start: node.start, end: node.end }
- }
|