viewer.js 6.8 KB

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