fix: read bundles via compiler outputFileSystem

Author: Br1an67

src/BundleAnalyzerPlugin.js

@@ -181,6 +181,7 @@ class BundleAnalyzerPlugin {
         reportTitle: this.opts.reportTitle,
         compressionAlgorithm: this.opts.compressionAlgorithm,
         bundleDir: this.getBundleDirFromCompiler(),
+        bundleDirFs: this.getBundleDirFsFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
         excludeAssets: this.opts.excludeAssets,
@@ -202,6 +203,7 @@ class BundleAnalyzerPlugin {
       ),
       compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
+      bundleDirFs: this.getBundleDirFsFromCompiler(),
       logger: this.logger,
       excludeAssets: this.opts.excludeAssets,
     });
@@ -222,40 +224,45 @@ class BundleAnalyzerPlugin {
       reportTitle: this.opts.reportTitle,
       compressionAlgorithm: this.opts.compressionAlgorithm,
       bundleDir: this.getBundleDirFromCompiler(),
+      bundleDirFs: this.getBundleDirFsFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,
       excludeAssets: this.opts.excludeAssets,
     });
   }
 
   getBundleDirFromCompiler() {
-    const { outputFileSystem } = /** @type {Compiler} */ (this.compiler);
+    const compiler = /** @type {Compiler} */ (this.compiler);
+    const outputFs = /** @type {OutputFileSystem | undefined} */ (
+      compiler.outputFileSystem
+    );
 
-    // TypeScript thinks `outputFileSystem` can be null, but in practice it's always set
-    // when this method is called
-    const outputFs = /** @type {OutputFileSystem} */ (outputFileSystem);
+    if (!outputFs || outputFs === fs) {
+      return compiler.outputPath;
+    }
 
-    // Detect `memfs` (used by webpack-dev-server 4+) by checking for the `__vol` property
-    // Related: #471
-    if (/** @type {{ __vol?: unknown }} */ (outputFs).__vol) {
-      return null;
+    if (typeof outputFs.readFileSync === "function") {
+      return compiler.outputPath;
     }
 
-    const outputFileSystemConstructor = outputFs.constructor;
+    return null;
+  }
+
+  getBundleDirFsFromCompiler() {
+    const compiler = /** @type {Compiler} */ (this.compiler);
+    const outputFs = /** @type {OutputFileSystem | undefined} */ (
+      compiler.outputFileSystem
+    );
 
-    if (typeof outputFileSystemConstructor === "undefined") {
-      return /** @type {Compiler} */ (this.compiler).outputPath;
+    if (!outputFs || outputFs === fs) {
+      return null;
     }
-    switch (outputFileSystemConstructor.name) {
-      case "MemoryFileSystem":
-        return null;
-      // Detect AsyncMFS used by Nuxt 2.5 that replaces webpack's MFS during development
-      // Related: #274
-      case "AsyncMFS":
-        return null;
-      default:
-        return /** @type {Compiler} */ (this.compiler).outputPath;
+
+    if (typeof outputFs.readFileSync !== "function") {
+      return null;
     }
+
+    return outputFs;
   }
 }
 

src/analyzer.js

@@ -180,6 +180,7 @@ function isEntryModule(statsModule) {
  * @property {Logger} logger logger
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
  * @property {ExcludeAssets} excludeAssets exclude assets
+ * @property {{ readFileSync: (path: string, encoding: string) => string } | null} bundleDirFs filesystem for reading bundle files
  */
 
 /** @typedef {import("./tree/Module").ModuleChartData} ModuleChartData */
@@ -216,6 +217,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     logger = new Logger(),
     compressionAlgorithm = "gzip",
     excludeAssets = null,
+    bundleDirFs = fs,
   } = opts || {};
 
   const isAssetIncluded = createAssetsFilter(excludeAssets);
@@ -286,6 +288,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
       try {
         bundleInfo = parseBundle(assetFile, {
           sourceType: statAsset.info.javascriptModule ? "module" : "script",
+          fs: bundleDirFs || fs,
         });
       } catch (err) {
         const msg =

src/parseUtils.js

@@ -323,13 +323,13 @@ function isAsyncWebWorkerChunkExpression(node) {
 
 /**
  * @param {string} bundlePath bundle path
- * @param {{ sourceType: "script" | "module" }} opts options
+ * @param {{ sourceType: "script" | "module", fs?: { readFileSync: (path: string, encoding: string) => string } }} opts options
  * @returns {{ modules: Modules, src: string, runtimeSrc: string }} parsed result
  */
 module.exports.parseBundle = function parseBundle(bundlePath, opts) {
-  const { sourceType = "script" } = opts || {};
+  const { sourceType = "script", fs: bundleFs = fs } = opts || {};
 
-  const content = fs.readFileSync(bundlePath, "utf8");
+  const content = bundleFs.readFileSync(bundlePath, "utf8");
   const ast = acorn.parse(content, {
     sourceType,
     ecmaVersion: "latest",

src/viewer.js

@@ -21,6 +21,7 @@ const { open } = require("./utils");
 /** @typedef {import("./BundleAnalyzerPlugin").ExcludeAssets} ExcludeAssets */
 /** @typedef {import("./analyzer").ViewerDataOptions} ViewerDataOptions */
 /** @typedef {import("./analyzer").ChartData} ChartData */
+/** @typedef {{ readFileSync: (path: string, encoding: string) => string }} BundleDirFs */
 
 const projectRoot = path.resolve(__dirname, "..");
 
@@ -107,6 +108,7 @@ function getChartData(analyzerOpts, bundleStats, bundleDir) {
  * @property {string} host host
  * @property {boolean} openBrowser true when need to open browser, otherwise false
  * @property {string | null} bundleDir bundle dir
+ * @property {BundleDirFs | null} bundleDirFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {Sizes} defaultSizes default sizes
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -128,6 +130,7 @@ async function startServer(bundleStats, opts) {
     host = "127.0.0.1",
     openBrowser = true,
     bundleDir = null,
+    bundleDirFs = null,
     logger = new Logger(),
     defaultSizes = "parsed",
     compressionAlgorithm,
@@ -136,7 +139,12 @@ async function startServer(bundleStats, opts) {
     analyzerUrl,
   } = opts || {};
 
-  const analyzerOpts = { logger, excludeAssets, compressionAlgorithm };
+  const analyzerOpts = {
+    logger,
+    excludeAssets,
+    compressionAlgorithm,
+    bundleDirFs,
+  };
 
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 
@@ -240,6 +248,7 @@ async function startServer(bundleStats, opts) {
  * @property {string} reportFilename report filename
  * @property {ReportTitle} reportTitle report title
  * @property {string | null} bundleDir bundle dir
+ * @property {BundleDirFs | null} bundleDirFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {Sizes} defaultSizes default sizes
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -257,14 +266,15 @@ async function generateReport(bundleStats, opts) {
     reportFilename,
     reportTitle,
     bundleDir = null,
+    bundleDirFs = null,
     logger = new Logger(),
     defaultSizes = "parsed",
     compressionAlgorithm,
     excludeAssets = null,
   } = opts || {};
 
   const chartData = getChartData(
-    { logger, excludeAssets, compressionAlgorithm },
+    { logger, excludeAssets, compressionAlgorithm, bundleDirFs },
     bundleStats,
     bundleDir,
   );
@@ -302,6 +312,7 @@ async function generateReport(bundleStats, opts) {
  * @typedef {object} GenerateJSONReportOptions
  * @property {string} reportFilename report filename
  * @property {string | null} bundleDir bundle dir
+ * @property {BundleDirFs | null} bundleDirFs filesystem for reading bundle files
  * @property {Logger} logger logger
  * @property {ExcludeAssets} excludeAssets exclude assets
  * @property {CompressionAlgorithm} compressionAlgorithm compression algorithm
@@ -316,13 +327,14 @@ async function generateJSONReport(bundleStats, opts) {
   const {
     reportFilename,
     bundleDir = null,
+    bundleDirFs = null,
     logger = new Logger(),
     excludeAssets = null,
     compressionAlgorithm,
   } = opts || {};
 
   const chartData = getChartData(
-    { logger, excludeAssets, compressionAlgorithm },
+    { logger, excludeAssets, compressionAlgorithm, bundleDirFs },
     bundleStats,
     bundleDir,
   );