analyzer.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. "use strict";
  2. const fs = require('fs');
  3. const path = require('path');
  4. const _ = require('lodash');
  5. const gzipSize = require('gzip-size');
  6. const Logger = require('./Logger');
  7. const Folder = require('./tree/Folder').default;
  8. const {
  9. parseBundle
  10. } = require('./parseUtils');
  11. const {
  12. createAssetsFilter
  13. } = require('./utils');
  14. const FILENAME_QUERY_REGEXP = /\?.*$/u;
  15. const FILENAME_EXTENSIONS = /\.(js|mjs)$/iu;
  16. module.exports = {
  17. getViewerData,
  18. readStatsFromFile
  19. };
  20. function getViewerData(bundleStats, bundleDir, opts) {
  21. const {
  22. logger = new Logger(),
  23. excludeAssets = null
  24. } = opts || {};
  25. const isAssetIncluded = createAssetsFilter(excludeAssets); // Sometimes all the information is located in `children` array (e.g. problem in #10)
  26. if (_.isEmpty(bundleStats.assets) && !_.isEmpty(bundleStats.children)) {
  27. const {
  28. children
  29. } = bundleStats;
  30. bundleStats = bundleStats.children[0]; // Sometimes if there are additional child chunks produced add them as child assets,
  31. // leave the 1st one as that is considered the 'root' asset.
  32. for (let i = 1; i < children.length; i++) {
  33. children[i].assets.forEach(asset => {
  34. asset.isChild = true;
  35. bundleStats.assets.push(asset);
  36. });
  37. }
  38. } else if (!_.isEmpty(bundleStats.children)) {
  39. // Sometimes if there are additional child chunks produced add them as child assets
  40. bundleStats.children.forEach(child => {
  41. child.assets.forEach(asset => {
  42. asset.isChild = true;
  43. bundleStats.assets.push(asset);
  44. });
  45. });
  46. } // Picking only `*.js or *.mjs` assets from bundle that has non-empty `chunks` array
  47. bundleStats.assets = bundleStats.assets.filter(asset => {
  48. // Filter out non 'asset' type asset if type is provided (Webpack 5 add a type to indicate asset types)
  49. if (asset.type && asset.type !== 'asset') {
  50. return false;
  51. } // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
  52. // See #22
  53. asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
  54. return FILENAME_EXTENSIONS.test(asset.name) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
  55. }); // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
  56. let bundlesSources = null;
  57. let parsedModules = null;
  58. if (bundleDir) {
  59. bundlesSources = {};
  60. parsedModules = {};
  61. for (const statAsset of bundleStats.assets) {
  62. const assetFile = path.join(bundleDir, statAsset.name);
  63. let bundleInfo;
  64. try {
  65. bundleInfo = parseBundle(assetFile);
  66. } catch (err) {
  67. const msg = err.code === 'ENOENT' ? 'no such file' : err.message;
  68. logger.warn(`Error parsing bundle asset "${assetFile}": ${msg}`);
  69. continue;
  70. }
  71. bundlesSources[statAsset.name] = _.pick(bundleInfo, 'src', 'runtimeSrc');
  72. Object.assign(parsedModules, bundleInfo.modules);
  73. }
  74. if (_.isEmpty(bundlesSources)) {
  75. bundlesSources = null;
  76. parsedModules = null;
  77. logger.warn('\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n');
  78. }
  79. }
  80. const assets = bundleStats.assets.reduce((result, statAsset) => {
  81. // If asset is a childAsset, then calculate appropriate bundle modules by looking through stats.children
  82. const assetBundles = statAsset.isChild ? getChildAssetBundles(bundleStats, statAsset.name) : bundleStats;
  83. const modules = assetBundles ? getBundleModules(assetBundles) : [];
  84. const asset = result[statAsset.name] = _.pick(statAsset, 'size');
  85. const assetSources = bundlesSources && _.has(bundlesSources, statAsset.name) ? bundlesSources[statAsset.name] : null;
  86. if (assetSources) {
  87. asset.parsedSize = Buffer.byteLength(assetSources.src);
  88. asset.gzipSize = gzipSize.sync(assetSources.src);
  89. } // Picking modules from current bundle script
  90. const assetModules = modules.filter(statModule => assetHasModule(statAsset, statModule)); // Adding parsed sources
  91. if (parsedModules) {
  92. const unparsedEntryModules = [];
  93. for (const statModule of assetModules) {
  94. if (parsedModules[statModule.id]) {
  95. statModule.parsedSrc = parsedModules[statModule.id];
  96. } else if (isEntryModule(statModule)) {
  97. unparsedEntryModules.push(statModule);
  98. }
  99. } // Webpack 5 changed bundle format and now entry modules are concatenated and located at the end of it.
  100. // Because of this they basically become a concatenated module, for which we can't even precisely determine its
  101. // parsed source as it's located in the same scope as all Webpack runtime helpers.
  102. if (unparsedEntryModules.length && assetSources) {
  103. if (unparsedEntryModules.length === 1) {
  104. // So if there is only one entry we consider its parsed source to be all the bundle code excluding code
  105. // from parsed modules.
  106. unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc;
  107. } else {
  108. // If there are multiple entry points we move all of them under synthetic concatenated module.
  109. _.pullAll(assetModules, unparsedEntryModules);
  110. assetModules.unshift({
  111. identifier: './entry modules',
  112. name: './entry modules',
  113. modules: unparsedEntryModules,
  114. size: unparsedEntryModules.reduce((totalSize, module) => totalSize + module.size, 0),
  115. parsedSrc: assetSources.runtimeSrc
  116. });
  117. }
  118. }
  119. }
  120. asset.modules = assetModules;
  121. asset.tree = createModulesTree(asset.modules);
  122. return result;
  123. }, {});
  124. return Object.entries(assets).map(([filename, asset]) => ({
  125. label: filename,
  126. isAsset: true,
  127. // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
  128. // In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will
  129. // be the size of minified bundle.
  130. // Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)
  131. statSize: asset.tree.size || asset.size,
  132. parsedSize: asset.parsedSize,
  133. gzipSize: asset.gzipSize,
  134. groups: _.invokeMap(asset.tree.children, 'toChartData')
  135. }));
  136. }
  137. function readStatsFromFile(filename) {
  138. return JSON.parse(fs.readFileSync(filename, 'utf8'));
  139. }
  140. function getChildAssetBundles(bundleStats, assetName) {
  141. return (bundleStats.children || []).find(c => _(c.assetsByChunkName).values().flatten().includes(assetName));
  142. }
  143. function getBundleModules(bundleStats) {
  144. return _(bundleStats.chunks).map('modules').concat(bundleStats.modules).compact().flatten().uniqBy('id') // Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5)
  145. .reject(isRuntimeModule).value();
  146. }
  147. function assetHasModule(statAsset, statModule) {
  148. // Checking if this module is the part of asset chunks
  149. return (statModule.chunks || []).some(moduleChunk => statAsset.chunks.includes(moduleChunk));
  150. }
  151. function isEntryModule(statModule) {
  152. return statModule.depth === 0;
  153. }
  154. function isRuntimeModule(statModule) {
  155. return statModule.moduleType === 'runtime';
  156. }
  157. function createModulesTree(modules) {
  158. const root = new Folder('.');
  159. modules.forEach(module => root.addModule(module));
  160. root.mergeNestedFolders();
  161. return root;
  162. }