webpack-bundle-analyzer/lib/viewer.js

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var path = require('path');
var fs = require('fs');

var _ = require('lodash');
var express = require('express');
var ejs = require('ejs');
var opener = require('opener');
var mkdir = require('mkdirp');

var _require = require('chalk'),
    bold = _require.bold;

var analyzer = require('./analyzer');

var projectRoot = path.resolve(__dirname, '..');

module.exports = {
  startServer: startServer,
  generateReport: generateReport,
  // deprecated
  start: startServer
};

function startServer(bundleStats, opts) {
  opts = _extends({
    port: 8888,
    openBrowser: true,
    bundleDir: null
  }, opts);

  var chartData = void 0;
  try {
    chartData = analyzer.getChartData(bundleStats, opts.bundleDir);
  } catch (err) {
    console.error('Could\'t analyze webpack bundle:\n' + err);
    return;
  }

  var app = express();

  app.set('view engine', 'ejs');
  app.set('views', projectRoot + '/views');
  app.use(express.static(projectRoot + '/client'));
  app.use('/node_modules/filesize', express.static(require.resolve('filesize')));

  app.use('/', function (req, res) {
    res.render('viewer', {
      mode: 'server',
      chartData: JSON.stringify(chartData)
    });
  });

  return app.listen(opts.port, function () {
    var url = 'http://localhost:' + opts.port;

    console.log(bold('Webpack Bundle Analyzer') + ' is started at ' + bold(url) + '\n' + ('Use ' + bold('Ctrl+C') + ' to close it'));

    if (opts.openBrowser) {
      opener(url);
    }
  });
}

function generateReport(bundleStats, opts) {
  opts = _extends({
    openBrowser: true,
    reportFilename: 'report.html',
    bundleDir: null
  }, opts);

  var chartData = void 0;
  try {
    chartData = analyzer.getChartData(bundleStats, opts.bundleDir);
  } catch (err) {
    console.error('Could\'t analyze webpack bundle:\n' + err);
    return;
  }

  ejs.renderFile(projectRoot + '/views/viewer.ejs', {
    mode: 'static',
    chartData: JSON.stringify(chartData),
    assetContent: getAssetContent
  }, function (err, reportHtml) {
    if (err) return console.error(err);

    var reportFilepath = opts.reportFilename;

    if (!path.isAbsolute(reportFilepath)) {
      reportFilepath = path.resolve(opts.bundleDir || process.cwd(), reportFilepath);
    }

    mkdir.sync(path.dirname(reportFilepath));
    fs.writeFileSync(reportFilepath, reportHtml);

    console.log(bold('Webpack Bundle Analyzer') + ' saved report to ' + bold(reportFilepath) + '\n');

    if (opts.openBrowser) {
      opener('file://' + reportFilepath);
    }
  });
}

function getAssetContent(filename) {
  var filepath = void 0;

  if (_.startsWith(filename, 'node_modules/')) {
    filepath = require.resolve(filename.slice('node_modules/'.length));
  } else {
    filepath = projectRoot + '/client/' + filename;
  }

  return fs.readFileSync(filepath, 'utf8');
}