vue-hello/node_modules/@vue/cli-service/lib/webpack/analyzeBundle.js

// 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 }
}