viewer.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. "use strict";
  2. const path = require('path');
  3. const fs = require('fs');
  4. const http = require('http');
  5. const WebSocket = require('ws');
  6. const sirv = require('sirv');
  7. const _ = require('lodash');
  8. const {
  9. bold
  10. } = require('chalk');
  11. const Logger = require('./Logger');
  12. const analyzer = require('./analyzer');
  13. const {
  14. open
  15. } = require('./utils');
  16. const {
  17. renderViewer
  18. } = require('./template');
  19. const projectRoot = path.resolve(__dirname, '..');
  20. function resolveTitle(reportTitle) {
  21. if (typeof reportTitle === 'function') {
  22. return reportTitle();
  23. } else {
  24. return reportTitle;
  25. }
  26. }
  27. module.exports = {
  28. startServer,
  29. generateReport,
  30. generateJSONReport,
  31. getEntrypoints,
  32. // deprecated
  33. start: startServer
  34. };
  35. async function startServer(bundleStats, opts) {
  36. const {
  37. port = 8888,
  38. host = '127.0.0.1',
  39. openBrowser = true,
  40. bundleDir = null,
  41. logger = new Logger(),
  42. defaultSizes = 'parsed',
  43. excludeAssets = null,
  44. reportTitle,
  45. analyzerUrl
  46. } = opts || {};
  47. const analyzerOpts = {
  48. logger,
  49. excludeAssets
  50. };
  51. let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  52. const entrypoints = getEntrypoints(bundleStats);
  53. if (!chartData) return;
  54. const sirvMiddleware = sirv(`${projectRoot}/public`, {
  55. // disables caching and traverse the file system on every request
  56. dev: true
  57. });
  58. const server = http.createServer((req, res) => {
  59. if (req.method === 'GET' && req.url === '/') {
  60. const html = renderViewer({
  61. mode: 'server',
  62. title: resolveTitle(reportTitle),
  63. chartData,
  64. entrypoints,
  65. defaultSizes,
  66. enableWebSocket: true
  67. });
  68. res.writeHead(200, {
  69. 'Content-Type': 'text/html'
  70. });
  71. res.end(html);
  72. } else {
  73. sirvMiddleware(req, res);
  74. }
  75. });
  76. await new Promise(resolve => {
  77. server.listen(port, host, () => {
  78. resolve();
  79. const url = analyzerUrl({
  80. listenPort: port,
  81. listenHost: host,
  82. boundAddress: server.address()
  83. });
  84. logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
  85. if (openBrowser) {
  86. open(url, logger);
  87. }
  88. });
  89. });
  90. const wss = new WebSocket.Server({
  91. server
  92. });
  93. wss.on('connection', ws => {
  94. ws.on('error', err => {
  95. // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
  96. if (err.errno) return;
  97. logger.info(err.message);
  98. });
  99. });
  100. return {
  101. ws: wss,
  102. http: server,
  103. updateChartData
  104. };
  105. function updateChartData(bundleStats) {
  106. const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  107. if (!newChartData) return;
  108. chartData = newChartData;
  109. wss.clients.forEach(client => {
  110. if (client.readyState === WebSocket.OPEN) {
  111. client.send(JSON.stringify({
  112. event: 'chartDataUpdated',
  113. data: newChartData
  114. }));
  115. }
  116. });
  117. }
  118. }
  119. async function generateReport(bundleStats, opts) {
  120. const {
  121. openBrowser = true,
  122. reportFilename,
  123. reportTitle,
  124. bundleDir = null,
  125. logger = new Logger(),
  126. defaultSizes = 'parsed',
  127. excludeAssets = null
  128. } = opts || {};
  129. const chartData = getChartData({
  130. logger,
  131. excludeAssets
  132. }, bundleStats, bundleDir);
  133. const entrypoints = getEntrypoints(bundleStats);
  134. if (!chartData) return;
  135. const reportHtml = renderViewer({
  136. mode: 'static',
  137. title: resolveTitle(reportTitle),
  138. chartData,
  139. entrypoints,
  140. defaultSizes,
  141. enableWebSocket: false
  142. });
  143. const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
  144. fs.mkdirSync(path.dirname(reportFilepath), {
  145. recursive: true
  146. });
  147. fs.writeFileSync(reportFilepath, reportHtml);
  148. logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
  149. if (openBrowser) {
  150. open(`file://${reportFilepath}`, logger);
  151. }
  152. }
  153. async function generateJSONReport(bundleStats, opts) {
  154. const {
  155. reportFilename,
  156. bundleDir = null,
  157. logger = new Logger(),
  158. excludeAssets = null
  159. } = opts || {};
  160. const chartData = getChartData({
  161. logger,
  162. excludeAssets
  163. }, bundleStats, bundleDir);
  164. if (!chartData) return;
  165. await fs.promises.mkdir(path.dirname(reportFilename), {
  166. recursive: true
  167. });
  168. await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
  169. logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
  170. }
  171. function getChartData(analyzerOpts, ...args) {
  172. let chartData;
  173. const {
  174. logger
  175. } = analyzerOpts;
  176. try {
  177. chartData = analyzer.getViewerData(...args, analyzerOpts);
  178. } catch (err) {
  179. logger.error(`Could't analyze webpack bundle:\n${err}`);
  180. logger.debug(err.stack);
  181. chartData = null;
  182. }
  183. if (_.isPlainObject(chartData) && _.isEmpty(chartData)) {
  184. logger.error("Could't find any javascript bundles in provided stats file");
  185. chartData = null;
  186. }
  187. return chartData;
  188. }
  189. function getEntrypoints(bundleStats) {
  190. if (bundleStats === null || bundleStats === undefined) {
  191. return [];
  192. }
  193. return Object.values(bundleStats.entrypoints || {}).map(entrypoint => entrypoint.name);
  194. }