Add option to build with Webpack Bundle Analyzer (#2708)

* Add option to build with webpack bundle analyzer

* Bump npm to v7 as recommended in actions/setup-node#213

* Workaround for npm/cli#558

* Add missing dep

.github/workflows/pr_size_change.yml

@@ -25,8 +25,12 @@ jobs:
         with:
           node-version: "14"
 
+      - name: Use npm v7
+        run: sudo npm install -g npm@7.x.x
+
       - name: Install JS dependencies
-        run: npm ci
+        # We need to use `npm install` here. If we don't, the workflow will fail.
+        run: npm install
         working-directory: ./js
 
       - name: Build production assets

js/package.json

@@ -23,16 +23,19 @@
     "@types/punycode": "^2.1.0",
     "@types/textarea-caret": "^3.0.0",
     "bundlewatch": "^0.3.2",
+    "cross-env": "^7.0.3",
     "flarum-webpack-config": "0.1.0-beta.10",
     "husky": "^4.3.8",
     "prettier": "^2.2.1",
     "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^3.3.12",
     "webpack-merge": "^4.2.2"
   },
   "scripts": {
     "dev": "webpack --mode development --watch",
     "build": "webpack --mode production",
+    "analyze": "cross-env ANALYZER=true npm run build",
     "format": "prettier --write src",
     "format-check": "prettier --check src"
   },

js/webpack.config.js

@@ -1,6 +1,15 @@
 const config = require('flarum-webpack-config');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const merge = require('webpack-merge');
 
+const useBundleAnalyzer = process.env.ANALYZER === 'true';
+
+const plugins = [];
+
+if (useBundleAnalyzer) {
+  plugins.push(new BundleAnalyzerPlugin());
+}
+
 module.exports = merge(config(), {
   output: {
     library: 'flarum.core',
@@ -10,6 +19,8 @@ module.exports = merge(config(), {
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },
+
+  plugins,
 });
 
 module.exports['module'].rules[0].test = /\.(tsx?|js)$/;