webpack-bundle-analyzer 4.0.0-rc1 → 4.3.0

package/src/utils.js

@@ -1,4 +1,4 @@
-const {inspect} = require('util');
+const {inspect, types} = require('util');
 const _ = require('lodash');
 const opener = require('opener');
 
@@ -15,11 +15,11 @@ function createAssetsFilter(excludePatterns) {
         pattern = new RegExp(pattern, 'u');
       }
 
-      if (_.isRegExp(pattern)) {
+      if (types.isRegExp(pattern)) {
         return (asset) => pattern.test(asset);
       }
 
-      if (!_.isFunction(pattern)) {
+      if (typeof pattern !== 'function') {
         throw new TypeError(
           `Pattern should be either string, RegExp or a function, but "${inspect(pattern, {depth: 0})}" got.`
         );
@@ -30,7 +30,7 @@ function createAssetsFilter(excludePatterns) {
     .value();
 
   if (excludeFunctions.length) {
-    return (asset) => _.every(excludeFunctions, fn => fn(asset) !== true);
+    return (asset) => excludeFunctions.every(fn => fn(asset) !== true);
   } else {
     return () => true;
   }

package/src/viewer.js

@@ -3,18 +3,16 @@ const fs = require('fs');
 const http = require('http');
 
 const WebSocket = require('ws');
+const sirv = require('sirv');
 const _ = require('lodash');
-const express = require('express');
-const ejs = require('ejs');
-const mkdir = require('mkdirp');
 const {bold} = require('chalk');
 
 const Logger = require('./Logger');
 const analyzer = require('./analyzer');
 const {open} = require('./utils');
+const {renderViewer} = require('./template');
 
 const projectRoot = path.resolve(__dirname, '..');
-const assetsRoot = path.join(projectRoot, 'public');
 
 function resolveTitle(reportTitle) {
   if (typeof reportTitle === 'function') {
@@ -50,28 +48,26 @@ async function startServer(bundleStats, opts) {
 
   if (!chartData) return;
 
-  const app = express();
-
-  // Explicitly using our `ejs` dependency to render templates
-  // Fixes #17
-  app.engine('ejs', require('ejs').renderFile);
-  app.set('view engine', 'ejs');
-  app.set('views', `${projectRoot}/views`);
-  app.use(express.static(`${projectRoot}/public`));
-
-  app.use('/', (req, res) => {
-    res.render('viewer', {
-      mode: 'server',
-      title: resolveTitle(reportTitle),
-      get chartData() { return chartData },
-      defaultSizes,
-      enableWebSocket: true,
-      // Helpers
-      escapeJson
-    });
+  const sirvMiddleware = sirv(`${projectRoot}/public`, {
+    // disables caching and traverse the file system on every request
+    dev: true
   });
 
-  const server = http.createServer(app);
+  const server = http.createServer((req, res) => {
+    if (req.method === 'GET' && req.url === '/') {
+      const html = renderViewer({
+        mode: 'server',
+        title: resolveTitle(reportTitle),
+        chartData,
+        defaultSizes,
+        enableWebSocket: true
+      });
+      res.writeHead(200, {'Content-Type': 'text/html'});
+      res.end(html);
+    } else {
+      sirvMiddleware(req, res);
+    }
+  });
 
   await new Promise(resolve => {
     server.listen(port, host, () => {
@@ -140,44 +136,23 @@ async function generateReport(bundleStats, opts) {
 
   if (!chartData) return;
 
-  await new Promise((resolve, reject) => {
-    ejs.renderFile(
-      `${projectRoot}/views/viewer.ejs`,
-      {
-        mode: 'static',
-        title: resolveTitle(reportTitle),
-        chartData,
-        defaultSizes,
-        enableWebSocket: false,
-        // Helpers
-        assetContent: getAssetContent,
-        escapeJson
-      },
-      (err, reportHtml) => {
-        try {
-          if (err) {
-            logger.error(err);
-            reject(err);
-            return;
-          }
-
-          const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
-
-          mkdir.sync(path.dirname(reportFilepath));
-          fs.writeFileSync(reportFilepath, reportHtml);
-
-          logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
-
-          if (openBrowser) {
-            open(`file://${reportFilepath}`, logger);
-          }
-          resolve();
-        } catch (e) {
-          reject(e);
-        }
-      }
-    );
+  const reportHtml = renderViewer({
+    mode: 'static',
+    title: resolveTitle(reportTitle),
+    chartData,
+    defaultSizes,
+    enableWebSocket: false
   });
+  const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
+
+  fs.mkdirSync(path.dirname(reportFilepath), {recursive: true});
+  fs.writeFileSync(reportFilepath, reportHtml);
+
+  logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
+
+  if (openBrowser) {
+    open(`file://${reportFilepath}`, logger);
+  }
 }
 
 async function generateJSONReport(bundleStats, opts) {
@@ -187,29 +162,12 @@ async function generateJSONReport(bundleStats, opts) {
 
   if (!chartData) return;
 
-  mkdir.sync(path.dirname(reportFilename));
-  fs.writeFileSync(reportFilename, JSON.stringify(chartData));
+  await fs.promises.mkdir(path.dirname(reportFilename), {recursive: true});
+  await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
 
   logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
 }
 
-function getAssetContent(filename) {
-  const assetPath = path.join(assetsRoot, filename);
-
-  if (!assetPath.startsWith(assetsRoot)) {
-    throw new Error(`"${filename}" is outside of the assets root`);
-  }
-
-  return fs.readFileSync(assetPath, 'utf8');
-}
-
-/**
- * Escapes `<` characters in JSON to safely use it in `<script>` tag.
- */
-function escapeJson(json) {
-  return JSON.stringify(json).replace(/</gu, '\\u003c');
-}
-
 function getChartData(analyzerOpts, ...args) {
   let chartData;
   const {logger} = analyzerOpts;

package/views/script.ejs

@@ -1,8 +0,0 @@
-<% if (mode === 'static') { %>
-  <!-- <%= filename %> -->
-  <script>
-    <%- assetContent(filename) %>
-  </script>
-<% } else { %>
-  <script src="<%= filename %>"></script>
-<% } %>