viewer.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. 'use strict';
  2. var startServer = function () {
  3. var _ref = _asyncToGenerator(function* (bundleStats, opts) {
  4. var _ref2 = opts || {},
  5. _ref2$port = _ref2.port,
  6. port = _ref2$port === undefined ? 8888 : _ref2$port,
  7. _ref2$host = _ref2.host,
  8. host = _ref2$host === undefined ? '127.0.0.1' : _ref2$host,
  9. _ref2$openBrowser = _ref2.openBrowser,
  10. openBrowser = _ref2$openBrowser === undefined ? true : _ref2$openBrowser,
  11. _ref2$bundleDir = _ref2.bundleDir,
  12. bundleDir = _ref2$bundleDir === undefined ? null : _ref2$bundleDir,
  13. _ref2$logger = _ref2.logger,
  14. logger = _ref2$logger === undefined ? new Logger() : _ref2$logger,
  15. _ref2$defaultSizes = _ref2.defaultSizes,
  16. defaultSizes = _ref2$defaultSizes === undefined ? 'parsed' : _ref2$defaultSizes,
  17. _ref2$excludeAssets = _ref2.excludeAssets,
  18. excludeAssets = _ref2$excludeAssets === undefined ? null : _ref2$excludeAssets;
  19. var analyzerOpts = { logger, excludeAssets };
  20. var chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  21. if (!chartData) return;
  22. var app = express();
  23. // Explicitly using our `ejs` dependency to render templates
  24. // Fixes #17
  25. app.engine('ejs', require('ejs').renderFile);
  26. app.set('view engine', 'ejs');
  27. app.set('views', `${projectRoot}/views`);
  28. app.use(express.static(`${projectRoot}/public`));
  29. app.use('/', function (req, res) {
  30. res.render('viewer', {
  31. mode: 'server',
  32. get chartData() {
  33. return JSON.stringify(chartData);
  34. },
  35. defaultSizes: JSON.stringify(defaultSizes)
  36. });
  37. });
  38. var server = http.createServer(app);
  39. yield new Promise(function (resolve) {
  40. server.listen(port, host, function () {
  41. resolve();
  42. var url = `http://${host}:${server.address().port}`;
  43. logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
  44. if (openBrowser) {
  45. opener(url);
  46. }
  47. });
  48. });
  49. var wss = new WebSocket.Server({ server });
  50. wss.on('connection', function (ws) {
  51. ws.on('error', function (err) {
  52. // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
  53. if (err.errno) return;
  54. logger.info(err.message);
  55. });
  56. });
  57. return {
  58. ws: wss,
  59. http: server,
  60. updateChartData
  61. };
  62. function updateChartData(bundleStats) {
  63. var newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
  64. if (!newChartData) return;
  65. chartData = newChartData;
  66. wss.clients.forEach(function (client) {
  67. if (client.readyState === WebSocket.OPEN) {
  68. client.send(JSON.stringify({
  69. event: 'chartDataUpdated',
  70. data: newChartData
  71. }));
  72. }
  73. });
  74. }
  75. });
  76. return function startServer(_x, _x2) {
  77. return _ref.apply(this, arguments);
  78. };
  79. }();
  80. function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
  81. var path = require('path');
  82. var fs = require('fs');
  83. var http = require('http');
  84. var WebSocket = require('ws');
  85. var _ = require('lodash');
  86. var express = require('express');
  87. var ejs = require('ejs');
  88. var opener = require('opener');
  89. var mkdir = require('mkdirp');
  90. var _require = require('chalk'),
  91. bold = _require.bold;
  92. var Logger = require('./Logger');
  93. var analyzer = require('./analyzer');
  94. var projectRoot = path.resolve(__dirname, '..');
  95. module.exports = {
  96. startServer,
  97. generateReport,
  98. // deprecated
  99. start: startServer
  100. };
  101. function generateReport(bundleStats, opts) {
  102. var _ref3 = opts || {},
  103. _ref3$openBrowser = _ref3.openBrowser,
  104. openBrowser = _ref3$openBrowser === undefined ? true : _ref3$openBrowser,
  105. _ref3$reportFilename = _ref3.reportFilename,
  106. reportFilename = _ref3$reportFilename === undefined ? 'report.html' : _ref3$reportFilename,
  107. _ref3$bundleDir = _ref3.bundleDir,
  108. bundleDir = _ref3$bundleDir === undefined ? null : _ref3$bundleDir,
  109. _ref3$logger = _ref3.logger,
  110. logger = _ref3$logger === undefined ? new Logger() : _ref3$logger,
  111. _ref3$defaultSizes = _ref3.defaultSizes,
  112. defaultSizes = _ref3$defaultSizes === undefined ? 'parsed' : _ref3$defaultSizes,
  113. _ref3$excludeAssets = _ref3.excludeAssets,
  114. excludeAssets = _ref3$excludeAssets === undefined ? null : _ref3$excludeAssets;
  115. var chartData = getChartData({ logger, excludeAssets }, bundleStats, bundleDir);
  116. if (!chartData) return;
  117. ejs.renderFile(`${projectRoot}/views/viewer.ejs`, {
  118. mode: 'static',
  119. chartData: JSON.stringify(chartData),
  120. assetContent: getAssetContent,
  121. defaultSizes: JSON.stringify(defaultSizes)
  122. }, function (err, reportHtml) {
  123. if (err) return logger.error(err);
  124. var reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
  125. mkdir.sync(path.dirname(reportFilepath));
  126. fs.writeFileSync(reportFilepath, reportHtml);
  127. logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
  128. if (openBrowser) {
  129. opener(`file://${reportFilepath}`);
  130. }
  131. });
  132. }
  133. function getAssetContent(filename) {
  134. return fs.readFileSync(`${projectRoot}/public/${filename}`, 'utf8');
  135. }
  136. function getChartData(analyzerOpts) {
  137. var chartData = void 0;
  138. var logger = analyzerOpts.logger;
  139. try {
  140. for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  141. args[_key - 1] = arguments[_key];
  142. }
  143. chartData = analyzer.getViewerData.apply(analyzer, args.concat([analyzerOpts]));
  144. } catch (err) {
  145. logger.error(`Could't analyze webpack bundle:\n${err}`);
  146. logger.debug(err.stack);
  147. chartData = null;
  148. }
  149. if (_.isPlainObject(chartData) && _.isEmpty(chartData)) {
  150. logger.error("Could't find any javascript bundles in provided stats file");
  151. chartData = null;
  152. }
  153. return chartData;
  154. }