bd0e1b81ba26ccbd706150f728e7ef68abf407493885a0741e9d3eacc9d90bc340a02f7c87dd0a8dbb0ecfb6c71b0b0adacd0fbe1c35e1e61531b6d7c4f768 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. const path = require('path');
  2. const fs = require('fs');
  3. const http = require('http');
  4. const WebSocket = require('ws');
  5. const _ = require('lodash');
  6. const express = require('express');
  7. const ejs = require('ejs');
  8. const opener = require('opener');
  9. const mkdir = require('mkdirp');
  10. const {bold} = require('chalk');
  11. const Logger = require('./Logger');
  12. const analyzer = require('./analyzer');
  13. const projectRoot = path.resolve(__dirname, '..');
  14. const assetsRoot = path.join(projectRoot, 'public');
  15. function resolveTitle(reportTitle) {
  16. if (typeof reportTitle === 'function') {
  17. return reportTitle();
  18. } else {
  19. return reportTitle;
  20. }
  21. }
  22. module.exports = {
  23. startServer,
  24. generateReport,
  25. generateJSONReport,
  26. // deprecated
  27. start: startServer
  28. };
  29. async function startServer(bundleStats, opts) {
  30. const {
  31. port = 8888,
  32. host = '127.0.0.1',
  33. openBrowser = true,
  34. bundleDir = null,
  35. logger = new Logger(),
  36. defaultSizes = 'parsed',
  37. excludeAssets = null,
  38. reportTitle
  39. } = opts || {};
  40. const analyzerOpts = {logger, excludeAssets};
  41. let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  42. if (!chartData) return;
  43. const app = express();
  44. // Explicitly using our `ejs` dependency to render templates
  45. // Fixes #17
  46. app.engine('ejs', require('ejs').renderFile);
  47. app.set('view engine', 'ejs');
  48. app.set('views', `${projectRoot}/views`);
  49. app.use(express.static(`${projectRoot}/public`));
  50. app.use('/', (req, res) => {
  51. res.render('viewer', {
  52. mode: 'server',
  53. title: resolveTitle(reportTitle),
  54. get chartData() { return chartData },
  55. defaultSizes,
  56. enableWebSocket: true,
  57. // Helpers
  58. escapeJson
  59. });
  60. });
  61. const server = http.createServer(app);
  62. await new Promise(resolve => {
  63. server.listen(port, host, () => {
  64. resolve();
  65. const url = `http://${host}:${server.address().port}`;
  66. logger.info(
  67. `${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` +
  68. `Use ${bold('Ctrl+C')} to close it`
  69. );
  70. if (openBrowser) {
  71. opener(url);
  72. }
  73. });
  74. });
  75. const wss = new WebSocket.Server({server});
  76. wss.on('connection', ws => {
  77. ws.on('error', err => {
  78. // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
  79. if (err.errno) return;
  80. logger.info(err.message);
  81. });
  82. });
  83. return {
  84. ws: wss,
  85. http: server,
  86. updateChartData
  87. };
  88. function updateChartData(bundleStats) {
  89. const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  90. if (!newChartData) return;
  91. chartData = newChartData;
  92. wss.clients.forEach(client => {
  93. if (client.readyState === WebSocket.OPEN) {
  94. client.send(JSON.stringify({
  95. event: 'chartDataUpdated',
  96. data: newChartData
  97. }));
  98. }
  99. });
  100. }
  101. }
  102. async function generateReport(bundleStats, opts) {
  103. const {
  104. openBrowser = true,
  105. reportFilename,
  106. reportTitle,
  107. bundleDir = null,
  108. logger = new Logger(),
  109. defaultSizes = 'parsed',
  110. excludeAssets = null
  111. } = opts || {};
  112. const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
  113. if (!chartData) return;
  114. await new Promise((resolve, reject) => {
  115. ejs.renderFile(
  116. `${projectRoot}/views/viewer.ejs`,
  117. {
  118. mode: 'static',
  119. title: resolveTitle(reportTitle),
  120. chartData,
  121. defaultSizes,
  122. enableWebSocket: false,
  123. // Helpers
  124. assetContent: getAssetContent,
  125. escapeJson
  126. },
  127. (err, reportHtml) => {
  128. try {
  129. if (err) {
  130. logger.error(err);
  131. reject(err);
  132. return;
  133. }
  134. const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
  135. mkdir.sync(path.dirname(reportFilepath));
  136. fs.writeFileSync(reportFilepath, reportHtml);
  137. logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
  138. if (openBrowser) {
  139. opener(`file://${reportFilepath}`);
  140. }
  141. resolve();
  142. } catch (e) {
  143. reject(e);
  144. }
  145. }
  146. );
  147. });
  148. }
  149. async function generateJSONReport(bundleStats, opts) {
  150. const {reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null} = opts || {};
  151. const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
  152. if (!chartData) return;
  153. mkdir.sync(path.dirname(reportFilename));
  154. fs.writeFileSync(reportFilename, JSON.stringify(chartData));
  155. logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
  156. }
  157. function getAssetContent(filename) {
  158. const assetPath = path.join(assetsRoot, filename);
  159. if (!assetPath.startsWith(assetsRoot)) {
  160. throw new Error(`"${filename}" is outside of the assets root`);
  161. }
  162. return fs.readFileSync(assetPath, 'utf8');
  163. }
  164. /**
  165. * Escapes `<` characters in JSON to safely use it in `<script>` tag.
  166. */
  167. function escapeJson(json) {
  168. return JSON.stringify(json).replace(/</gu, '\\u003c');
  169. }
  170. function getChartData(analyzerOpts, ...args) {
  171. let chartData;
  172. const {logger} = analyzerOpts;
  173. try {
  174. chartData = analyzer.getViewerData(...args, analyzerOpts);
  175. } catch (err) {
  176. logger.error(`Could't analyze webpack bundle:\n${err}`);
  177. logger.debug(err.stack);
  178. chartData = null;
  179. }
  180. if (_.isPlainObject(chartData) && _.isEmpty(chartData)) {
  181. logger.error("Could't find any javascript bundles in provided stats file");
  182. chartData = null;
  183. }
  184. return chartData;
  185. }