docs(repack): add guide for lazy compilation

website/docs/configuration/guides/lazy-compilation.mdx

@@ -0,0 +1,99 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Lazy Compilation
+
+:::caution
+
+Lazy compilation is an experimental feature of webpack, therefore it is considered experimental in Re.Pack as well.
+
+If you encounter an issue while using lazy compilation, it's advisable to disable it temporarily before reporting the problem to ensure it's not the underlying cause.
+
+:::
+
+If you are using [Code splitting](../../code-splitting/usage) and have async chunks in your app, it might be beneficial to use lazy compilation in development. It will cause all dynamic imports in your app to be compiled only when necessary, reducing the time of your initial app startup.
+
+:::danger
+
+Lazy compilation is supported only for dynamic imports. While webpack has an option to also compile entrypoints on demand, this will not work in React Native environment, and will result in your app's bundle compiling with errors.
+
+:::
+
+:::caution
+
+Prefetching chunks with `ScriptManager` with lazy compilation might result in confusing behaviour. When fetched via `ScriptManager.shared.prefetchScript`, the chunk will be downloaded, but it will not have the desired contents inside. Only upon evaluation of that chunk, the compilation will be triggered and the result will be sent to your client.
+
+:::
+
+## Usage
+
+First, install the `react-native-event-source` package to your `devDependencies`:
+
+<Tabs>
+<TabItem value="npm" label="npm" default>
+
+```bash
+npm install -D react-native-event-source
+```
+
+</TabItem>
+<TabItem value="yarn" label="yarn">
+
+```bash
+yarn add -D react-native-event-source
+```
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add -D react-native-event-source
+```
+
+</TabItem>
+<TabItem value="bun" label="bun">
+
+```bash
+bun add -D react-native-event-source
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+
+`react-native-event-source` is a polyfill for `EventSource`
+which is used by webpack to communicate with the development server.
+It is required for lazy compilation to work.
+:::
+
+Then, add the following to your `webpack.config` file:
+
+```js
+/* ... */
+
+export default (env) => {
+  /* ... */
+
+  return {
+    /* ... */
+
+    module: {
+      experiments: [
+        lazyCompilation: {
+            imports: true,
+            entries: false,
+        }
+      ],
+    },
+
+    /* ... */
+  };
+};
+```
+
+:::tip
+
+You can read more about Webpack's lazy compilation feature here: https://webpack.js.org/configuration/experiments/#experimentslazycompilation
+
+:::

website/sidebars.js

@@ -77,6 +77,7 @@ module.exports = {
         'configuration/guides/svg',
         'configuration/guides/inline-assets',
         'configuration/guides/remote-assets',
+        'configuration/guides/lazy-compilation',
       ],
     },
   ],