feat(client): reduce the main bundle size

README.md

@@ -179,6 +179,17 @@ We use [CSS modules](https://github.com/css-modules/css-modules) to apply CSS st
 locally and avoid leaking styles to the whole web application.
 No additional configuration is needed since Create React App [supports CSS modules out of the box](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet).
 
+### Code splitting
+
+If a component requires a large package, it can be loaded on demand by using the `lazy()` function from React.
+
+Here is an example:
+
+- The component itself: [NotebookRender.tsx](./client/src/components/notebook/NotebookRender.tsx)
+- The wrapper allowing for lazy loading: [LazyNotebookRender.tsx](./client/src/components/notebook/LazyNotebookRender.tsx)
+
+In this case, we save ~950kB from being included in the final bundle.
+
 ### Testing
 
 We split testing into multiple categories. All these tests are required to pass
@@ -331,6 +342,16 @@ The script generates a `config.json` file into the `client/public` folder, and y
 modify this file with a text editor and reload the browser to test out different
 configuration settings.
 
+#### Bundle analysis
+
+The [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer) plugin can be used to analyze the final bundle and see which Node packages take up a lot of space.
+
+Use the `build:analyze` script to start it:
+
+```bash
+$ npm run build:analyze
+```
+
 ### Navigation map
 
 ```mermaid

client/craco.config.js

@@ -8,6 +8,11 @@ const commitHash = require("child_process")
   .trim();
 const version = commitHash ? commitHash : "dev";
 
+const enableAnalyzer = process.argv.find((arg) => arg.trim() === "--analyze");
+const BundleAnalyzerPlugin = enableAnalyzer
+  ? require("webpack-bundle-analyzer").BundleAnalyzerPlugin
+  : null;
+
 module.exports = {
   webpack: {
     configure: {
@@ -16,6 +21,9 @@ module.exports = {
         chunkFilename: `[name].[fullhash]-${version}.chunk.js`,
       },
     },
+    plugins: [
+      ...(BundleAnalyzerPlugin != null ? [new BundleAnalyzerPlugin()] : []),
+    ],
   },
   jest: {
     configure: {