viewer.js 4.1 KB

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