viewer.js 6.9 KB

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