gatsby-plugin-perf-budgets - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

gatsby-node.js

@@ -20,4 +20,6 @@ const fs = require(`fs-extra`);
 
-const fixedPagePath = pagePath => (pagePath === `/` ? `index` : pagePath);
+console.log(`test`);
 
+const fixedPagePath = (pagePath) => (pagePath === `/` ? `index` : pagePath);
+
 const getFilePath = ({ publicDir }, pagePath) =>
@@ -31,3 +33,3 @@ path.join(publicDir, `page-data`, fixedPagePath(pagePath), `page-data.json`);
       storeStats: Promise.resolve(),
-      ...(options || {})
+      ...(options || {}),
     };
@@ -53,7 +55,7 @@ }
         new GatsbyWebpackPerfBudgetPlugin({
-          storeStats: async stats => {
+          storeStats: async (stats) => {
             cache.set(STATS_CACHE_KEY, stats);
-          }
-        })
-      ]
+          },
+        }),
+      ],
     });
@@ -94,10 +96,2 @@ }
 
-  const staticQueries = {};
-  state.staticQueryComponents.forEach(sqc => {
-    staticQueries[sqc.hash] = path.relative(
-      state.program.directory,
-      sqc.componentPath
-    );
-  });
-
   const traverse = (item, fn) => {
@@ -107,23 +101,23 @@ fn(item);
     if (item.groups) {
-      item.groups.forEach(subItem => traverse(subItem, fn));
+      item.groups.forEach((subItem) => traverse(subItem, fn));
     }
   };
 
-  data.forEach(item =>
-    traverse(item, item => {
-      if (item.path === `./public/static/d`) {
-        item.label = "Static Queries Results";
-      } else if (
-        item.path &&
-        item.path.startsWith(`./public/static/d`) &&
-        item.path.endsWith(".json")
-      ) {
-        const hash = path.basename(item.path).replace(".json", "");
-        const sqc = staticQueries[hash];
-        item.label = `Static Query result (from "${sqc}")`;
-        item.type = `static-data`;
-        item.fetch = `/` + path.relative(`./public`, item.path);
-      }
-    })
-  );
+  // data.forEach((item) =>
+  //   traverse(item, (item) => {
+  //     if (item.path === `./public/static/d`) {
+  //       item.label = "Static Queries Results";
+  //     } else if (
+  //       item.path &&
+  //       item.path.startsWith(`./public/static/d`) &&
+  //       item.path.endsWith(".json")
+  //     ) {
+  //       const hash = path.basename(item.path).replace(".json", "");
+  //       const sqc = staticQueries[hash];
+  //       item.label = `Static Query result (from "${sqc}")`;
+  //       item.type = `static-data`;
+  //       item.fetch = `/` + path.relative(`./public`, item.path);
+  //     }
+  //   })
+  // );
 
@@ -133,3 +127,3 @@ const chunksDataByChunkName = data.reduce((acc, item) => {
       ...item,
-      type: `module-chunk`
+      type: `module-chunk`,
     };
@@ -140,7 +134,15 @@
 
+  const l = fs.readFileSync(
+    path.join(publicDir, `webpack.stats.json`),
+    `utf-8`
+  );
+  const webpackStatsJson = JSON.parse(l);
+
+  // const z = (await fs.readJson(path.join(publicDir, `webpack.stats.json`), { encoding: `utf-8`}))
+  // console.log({ z, p:path.join(publicDir, `webpack.stats.json`), l })
+
   const assetsByChunkName = transform(
-    (await fs.readJson(path.join(publicDir, `webpack.stats.json`)))
-      .assetsByChunkName,
+    webpackStatsJson.assetsByChunkName,
     (result, names, key) => {
-      result[key] = names.filter(v => v.endsWith(`.js`));
+      result[key] = names.filter((v) => v.endsWith(`.js`));
 
@@ -152,3 +154,3 @@ // return
 
-  Object.keys(assetsByChunkName).forEach(chunkName => {
+  Object.keys(assetsByChunkName).forEach((chunkName) => {
     // chunk.forEach(asse)
@@ -158,3 +160,3 @@
       const assets = assetsByChunkName[chunkName];
-      assets.forEach(asset => {
+      assets.forEach((asset) => {
         chunksDataByChunkName[asset].type = `page-chunk`;
@@ -165,3 +167,3 @@ });
 
-  assetsByChunkName.app.forEach(appChunk => {
+  assetsByChunkName.app.forEach((appChunk) => {
     chunksDataByChunkName[appChunk].type = `app-chunk`;
@@ -173,30 +175,66 @@ });
 
-  state.pages.forEach(
-    ({ componentChunkName, path: pagePath, moduleDependencies = [] }) => {
-      const pageDataStatsPath = getFilePath({ publicDir }, pagePath);
+  state.pages.forEach(({ componentChunkName, path: pagePath }) => {
+    const pageDataStatsPath = getFilePath({ publicDir }, pagePath);
 
-      const content = fs.readFileSync(pageDataStatsPath, `utf-8`);
+    const content = fs.readFileSync(pageDataStatsPath, `utf-8`);
 
-      const result = {
-        parsedSize: Buffer.byteLength(content),
-        gzipSize: gzipSize.sync(content),
-        statSize: 5000,
-        label: `Page-data`,
-        path: path.relative(state.program.directory, pageDataStatsPath),
-        fetch: `/` + path.relative(publicDir, pageDataStatsPath),
-        isAsset: true,
-        groups: [],
-        componentChunkName,
-        moduleDependencies,
-        pagePath,
-        // path: pagePath,
-        type: `page-data`
-      };
+    const parsedContent = JSON.parse(content);
 
-      // moduleDependencies.forEach();
+    const moduleDependencies = parsedContent.moduleDependencies || [];
+    const staticQueryHashes = parsedContent.staticQueryHashes || [];
 
-      pagesData[pagePath] = result;
-    }
-  );
+    const result = {
+      parsedSize: Buffer.byteLength(content),
+      gzipSize: gzipSize.sync(content),
+      statSize: 5000,
+      label: `Page-data`,
+      path: path.relative(state.program.directory, pageDataStatsPath),
+      fetch: `/` + path.relative(publicDir, pageDataStatsPath),
+      isAsset: true,
+      groups: [],
+      componentChunkName,
+      moduleDependencies,
+      staticQueryHashes,
+      pagePath,
+      // path: pagePath,
+      type: `page-data`,
+    };
 
+    // moduleDependencies.forEach();
+
+    pagesData[pagePath] = result;
+  });
+
+  const staticQueries = {};
+  state.staticQueryComponents.forEach((sqc) => {
+    const componentPath = path.relative(
+      state.program.directory,
+      sqc.componentPath
+    );
+
+    const staticQueryStatsPath = path.join(
+      publicDir,
+      `page-data`,
+      `sq`,
+      `d`,
+      `${sqc.hash}.json`
+    );
+
+    const content = fs.readFileSync(staticQueryStatsPath, `utf-8`);
+
+    // console.log({ sqc });
+    staticQueries[sqc.hash] = {
+      path: componentPath,
+
+      parsedSize: Buffer.byteLength(content),
+      gzipSize: gzipSize.sync(content),
+      statSize: 5000,
+      label: `Static query ${sqc.componentPath}`,
+      type: `static-query-data`,
+      fetch: `/` + path.relative(publicDir, staticQueryStatsPath),
+      isAsset: true,
+      groups: [],
+    };
+  });
+
   const appDataPath = path.join(publicDir, `page-data`, `app-data.json`);
@@ -215,3 +253,3 @@ const content = fs.readFileSync(appDataPath, `utf-8`);
     // path: path.relative(publicDir, appDataPath),
-    type: `app-data`
+    type: `app-data`,
   };
@@ -223,2 +261,4 @@
 
+  // debugger;
+
   await new Promise((resolve, reject) => {
@@ -229,3 +269,3 @@ ejs.renderFile(
         mode: "static",
-        title: "testing",
+        title: "Gatsby page resources and bundle analyzer",
 
@@ -237,2 +277,3 @@ // chartData,
         appData,
+        staticQueries,
 
@@ -243,3 +284,3 @@ defaultSizes: `gzip`,
         assetContent: getAssetContent,
-        escapeJson
+        escapeJson,
       },
@@ -246,0 +287,0 @@ (err, reportHtml) => {

lib/BundleAnalyzerPlugin.js

@@ -29,3 +29,3 @@ "use strict";
   constructor(opts = {}) {
-    this.opts = _objectSpread({
+    this.opts = _objectSpread(_objectSpread({
       analyzerMode: 'server',
@@ -43,3 +43,3 @@ analyzerHost: '127.0.0.1',
       startAnalyzer: true
-    }, opts, {
+    }, opts), {}, {
       analyzerPort: 'analyzerPort' in opts ? opts.analyzerPort === 'auto' ? 0 : opts.analyzerPort : 8888
@@ -46,0 +46,0 @@ });

lib/tree/ConcatenatedModule.js

@@ -82,3 +82,3 @@ "use strict";
   toChartData() {
-    return _objectSpread({}, super.toChartData(), {
+    return _objectSpread(_objectSpread({}, super.toChartData()), {}, {
       concatenated: true,
@@ -85,0 +85,0 @@ groups: _lodash.default.invokeMap(this.children, 'toChartData')

lib/tree/ContentFolder.js

@@ -41,3 +41,3 @@ "use strict";
   toChartData() {
-    return _objectSpread({}, super.toChartData(), {
+    return _objectSpread(_objectSpread({}, super.toChartData()), {}, {
       parsedSize: this.parsedSize,
@@ -44,0 +44,0 @@ gzipSize: this.gzipSize,

lib/tree/ContentModule.js

@@ -41,3 +41,3 @@ "use strict";
   toChartData() {
-    return _objectSpread({}, super.toChartData(), {
+    return _objectSpread(_objectSpread({}, super.toChartData()), {}, {
       inaccurateSizes: true
@@ -44,0 +44,0 @@ });

lib/tree/Folder.js

@@ -72,3 +72,3 @@ "use strict";
   toChartData() {
-    return _objectSpread({}, super.toChartData(), {
+    return _objectSpread(_objectSpread({}, super.toChartData()), {}, {
       parsedSize: this.parsedSize,
@@ -75,0 +75,0 @@ gzipSize: this.gzipSize

package.json

 {
   "name": "gatsby-plugin-perf-budgets",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

797601

increased by1.04%

Lines of code

5594

increased by1.01%

No dependency changes