add bundle tracker

frontends/open-discussions/package.json

@@ -157,6 +157,7 @@
     "uuid": "^8.3.2",
     "validator": "13.7.0",
     "webpack": "5.73.0",
+    "webpack-bundle-analyzer": "^4.6.1",
     "webpack-bundle-tracker": "1.5.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-middleware": "5.3.3",

frontends/open-discussions/webpack.config.js

@@ -2,6 +2,7 @@ const path = require("path")
 const webpack = require("webpack")
 const BundleTracker = require("webpack-bundle-tracker")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 
 const STATS_FILEPATH = path.resolve(__dirname, "../../webpack-stats/open-discussions.json")
 
@@ -16,7 +17,7 @@ const getPublicPath = isProduction => {
 }
 
 
-const getWebpackConfig = mode => {
+const getWebpackConfig = ({mode, analyzeBundle}) => {
   console.log(`Building for ${mode}`)
   const isProduction = mode === "production"
   const publicPath = getPublicPath(isProduction)
@@ -73,7 +74,11 @@ const getWebpackConfig = mode => {
       new webpack.LoaderOptionsPlugin({ minimize: true }),
       new webpack.optimize.AggressiveMergingPlugin(),
       new MiniCssExtractPlugin({ filename: "[name]-[contenthash].css" })
-    ] : []),
+    ] : []).concat(
+      analyzeBundle ? [new BundleAnalyzerPlugin({
+        analyzerMode: "static",
+      })] : []
+    ),
     resolve: {
       extensions: [".js", ".jsx"],
       fallback:   {
@@ -122,5 +127,6 @@ const getWebpackConfig = mode => {
 
 module.exports = (_env, argv) => {
   const mode = argv.mode || process.env.NODE_ENV || "production"
-  return getWebpackConfig(mode)
+  const analyzeBundle = process.env.WEBPACK_ANALYZE === "True"
+  return getWebpackConfig({mode, analyzeBundle})
 }

yarn.lock

@@ -16956,6 +16956,7 @@ __metadata:
     uuid: ^8.3.2
     validator: 13.7.0
     webpack: 5.73.0
+    webpack-bundle-analyzer: ^4.6.1
     webpack-bundle-tracker: 1.5.0
     webpack-cli: 4.10.0
     webpack-dev-middleware: 5.3.3