viewer.js 5.8 KB

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