Document how to minimize source code (fixes #90)

src/pages/guides/app-hooks.md

@@ -97,6 +97,37 @@ The following diagram illustrates how your custom hooks will be executed within
 
 ![aio-app-undeploy lifecycle](../images/aio-app-undeploy.png)
 
+## Extension hooks
+
+With the introduction of [Extensions](extensions/index.md), hooks must be placed at the root of the `ext.config.yaml` file.
+For example, for a default bootstrapped Experience Cloud extension: 
+
+```yaml
+operations:
+  view:
+    - type: web
+      impl: index.html
+actions: actions
+web: web-src
+runtimeManifest:
+  packages:
+    dx-excshell-1:
+      license: Apache-2.0
+      actions:
+        generic:
+          function: actions/generic/index.js
+          web: 'yes'
+          runtime: 'nodejs:14'
+          inputs:
+            LOG_LEVEL: debug
+          annotations:
+            require-adobe-auth: true
+            final: true
+hooks:
+  build-actions: echo build-actions
+  build-static: echo build-static
+``` 
+
 # npm script hooks
 
 Use of Project Firefly event hooks does not interfere with use of npm scripts, however you will need to use `npm run ..` to trigger them.

src/pages/guides/tips_tricks.md

@@ -93,4 +93,41 @@ await move(files, 'my/remote/src/folder/file.txt', 'my/remote/dest/file2.md') //
 await move(files, 'my/remote/src/folder/file.txt', 'my/remote/dest/') // will move file.txt to dest folder
 await move(files, 'my/remote/src/folder/', 'my/remote/dest/') // move folder to the dest folder
 await move(files, 'my/remote/folder/', 'my/remote/dest') // will rename folder to dest
-```
+```
+
+## Minification of actions and web assets
+
+The Firefly build process doesn't minify the files by default. 
+[Minification](https://en.wikipedia.org/wiki/Minification_%28programming%29) is the process of removing all unnecessary characters from your source code without altering its functionality. 
+It’s one of the main methods used to reduce load times and bandwidth usage on websites.**
+
+If you wish to minify your source code e.g. before a deployment, you can use [hooks](app-hooks.md) to override the build process with a custom one that includes a minification step.
+
+For example, with a default bootstrapped Experience Cloud extension, you can add the `build-actions` hook to minify the action and the `build-static` hook to minify web-assets:
+
+*/src/dx-excshell-1/ext.config.yaml*
+
+```yaml
+hooks:
+  build-actions: ncc build src/dx-excshell-1/actions/generic/index.js -o dist/dx-excshell-1/actions/generic-temp -m && bestzip dist/dx-excshell-1/actions/generic.zip dist/dx-excshell-1/actions/generic-temp/index.js
+  build-static: parcel build src/dx-excshell-1/web-src/index.html -d dist/dx-excshell-1/web-prod
+```   
+
+* `ncc` is used bundle the action into a single file, together with all its dependencies, gcc-style. This is a requirement for actions.
+* `bestzip` is used to zip the action for deployment.
+* `parcel` is used to bundle all web-assets including JS and CSS files.
+
+Make sure to add these dependencies to your `package.json`:
+
+```
+"devDependencies": {
+  "@vercel/ncc": "^0.30.0",
+  "bestzip": "1.1.6",
+  "cssnano": "^4.1.11",
+  "jest": "^26.6.3",
+  "parcel": "1.12.3",
+  "postcss": "^8.3.6" 
+}
+``` 
+
+Then you can run the build hooks with `aio app build`. You can expect a file size reduction of **50% at least** for actions and web-assets.