[Dev] Add Statoscope: Better bundle analyzer (#1800)

.stylelintrc.json

@@ -9,7 +9,7 @@
     "stylelint-declaration-block-no-ignored-properties",
     "stylelint-high-performance-animation",
     "stylelint-group-selectors",
-    "./plugins/wholePixel.js"
+    "./dev/wholePixel.js"
   ],
   "rules": {
     "number-leading-zero": "always",

dev/createPRComment.js

@@ -0,0 +1,10 @@
+/* eslint-env node */
+
+module.exports = async ({ github, context, core, body }) => {
+  await github.rest.issues.createComment({
+    issue_number: context.issue.number,
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    body,
+  });
+};

dev/createStatoscopeComment.js

@@ -0,0 +1,13 @@
+/* eslint-env node */
+
+const fs = require('fs');
+const createPRComment = require('./createPRComment');
+const template = require('../.github/workflows/statoscope-comment.js');
+
+module.exports = async ({ github, context, core }) => {
+  const data = JSON.parse(fs.readFileSync('result.json', 'utf8'));
+  data.prNumber = context.issue.number;
+  const body = template(data);
+
+  await createPRComment({ github, context, core, body });
+};

dev/webpackContextExtension.js

@@ -0,0 +1,19 @@
+/* eslint-env node */
+// Comes from: https://raw.githubusercontent.com/statoscope/statoscope.tech/main/custom-ext.js
+
+module.exports = class WebpackContextExtension {
+  constructor() {
+    this.context = '';
+  }
+
+  handleCompiler(compiler) {
+    this.context = compiler.context;
+  }
+
+  getExtension() {
+    return {
+      descriptor: { name: 'custom-webpack-extension-context', version: '1.0.0' },
+      payload: { context: this.context },
+    };
+  }
+};

package.json

@@ -16,7 +16,9 @@
     "gramjs:tl": "node ./src/lib/gramjs/tl/generateModules.js",
     "gramjs:lint:fix": "eslint ./src/lib/gramjs --fix",
     "test": "cross-env APP_ENV=test jest --verbose --forceExit",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "statoscope:validate": "statoscope validate --input  public/build-stats.json",
+    "statoscope:validate-diff": "statoscope validate --input input.json --reference reference.json"
   },
   "engines": {
     "node": "^16.13",
@@ -42,6 +44,8 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@peculiar/webcrypto": "^1.3.2",
+    "@statoscope/cli": "^5.20.1",
+    "@statoscope/webpack-plugin": "^5.20.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@types/croppie": "^2.6.1",
     "@types/jest": "^27.4.1",
@@ -93,7 +97,6 @@
     "stylelint-high-performance-animation": "^1.6.0",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0",
-    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"

webpack.config.js

@@ -8,10 +8,10 @@ const {
 } = require('webpack');
 const HtmlPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
-
+const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default;
+const WebpackContextExtension = require('./dev/webpackContextExtension');
 const appVersion = require('./package.json').version;
 
 dotenv.config();
@@ -135,12 +135,16 @@ module.exports = (env = {}, argv = {}) => {
         Buffer: ['buffer', 'Buffer'],
         process: 'process/browser',
       }),
-      ...(argv.mode === 'production' ? [
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'static',
-          openAnalyzer: false,
-        }),
-      ] : []),
+      new StatoscopeWebpackPlugin({
+        statsOptions: {
+          context: __dirname,
+        },
+        saveReportTo: path.resolve('./public/statoscope-report.html'),
+        saveStatsTo: path.resolve('./public/build-stats.json'),
+        normalizeStats: true,
+        open: 'file',
+        extensions: [new WebpackContextExtension()],
+      }),
     ],
 
     ...(!env.noSourceMap && {