329 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			329 lines
		
	
	
		
			9.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| // 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 }
 | |
| }
 | 
