webpack-bundle-analyzer 4.0.0 → 4.4.0

package/lib/viewer.js

@@ -8,13 +8,9 @@ const http = require('http');
 
 const WebSocket = require('ws');
 
-const _ = require('lodash');
-
-const express = require('express');
-
-const ejs = require('ejs');
+const sirv = require('sirv');
 
-const mkdir = require('mkdirp');
+const _ = require('lodash');
 
 const {
   bold
@@ -28,8 +24,11 @@ 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') {
@@ -64,29 +63,27 @@ async function startServer(bundleStats, opts) {
   };
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
   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((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);
+    }
   });
-  const server = http.createServer(app);
   await new Promise(resolve => {
     server.listen(port, host, () => {
       resolve();
@@ -144,39 +141,23 @@ async function generateReport(bundleStats, opts) {
     excludeAssets
   }, bundleStats, bundleDir);
   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) {
@@ -191,29 +172,13 @@ async function generateJSONReport(bundleStats, opts) {
     excludeAssets
   }, bundleStats, bundleDir);
   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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "4.0.0",
+  "version": "4.4.0",
   "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
   "author": "Yury Grunin <grunin.ya@ya.ru>",
   "license": "MIT",
@@ -30,22 +30,17 @@
   "files": [
     "public",
     "lib",
-    "src",
-    "views"
+    "src"
   ],
   "dependencies": {
     "acorn": "^8.0.4",
     "acorn-walk": "^8.0.0",
-    "bfj": "^7.0.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.0",
-    "ejs": "^3.1.5",
-    "express": "^4.17.1",
-    "filesize": "^6.1.0",
-    "gzip-size": "^5.1.1",
+    "gzip-size": "^6.0.0",
     "lodash": "^4.17.20",
-    "mkdirp": "^1.0.4",
     "opener": "^1.5.2",
+    "sirv": "^1.0.7",
     "ws": "^7.3.1"
   },
   "devDependencies": {
@@ -57,6 +52,7 @@
     "@babel/preset-react": "7.12.5",
     "@babel/register": "7.12.1",
     "@babel/runtime": "7.12.5",
+    "@carrotsearch/foamtree": "3.5.0",
     "autoprefixer": "10.0.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
@@ -73,6 +69,8 @@
     "eslint-config-th0r-react": "2.0.1",
     "eslint-plugin-react": "7.21.5",
     "exports-loader": "1.1.1",
+    "filesize": "^6.1.0",
+    "globby": "11.0.1",
     "gulp": "4.0.2",
     "gulp-babel": "8.0.0",
     "mobx": "5.15.7",