diff --git a/CHANGELOG.md b/CHANGELOG.md index bebc723c7..6af7de82b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ [#555](https://github.com/nextcloud/cookbook/pull/555/) @seyfeb - Functionality to reference other recipes by id in description, tools, ingredients, and instructions [#562](https://github.com/nextcloud/cookbook/pull/562/) @seyfeb +- Bundle Analyzer documentation + [#573](https://github.com/nextcloud/cookbook/pull/573/) @seyfeb ### Changed - Using computed property in recipe view diff --git a/docs/dev/frontend/assets/webpack-bundle-analyzer_example.png b/docs/dev/frontend/assets/webpack-bundle-analyzer_example.png new file mode 100644 index 000000000..892f22e76 Binary files /dev/null and b/docs/dev/frontend/assets/webpack-bundle-analyzer_example.png differ diff --git a/docs/dev/frontend/webpack-bundle-analyzer.md b/docs/dev/frontend/webpack-bundle-analyzer.md new file mode 100644 index 000000000..f11dc9d27 --- /dev/null +++ b/docs/dev/frontend/webpack-bundle-analyzer.md @@ -0,0 +1,21 @@ +# Webpack Bundle Analyzer + +The Webpack Bundle Analyzer Plugin is installed as a development dependency (see `package.json`). It is used to generate an interactive visualization of the bundles content and it’s dependencies and can be helpful for identifying those dependencies that contribute most to the final bundle size. Once those parts are identified the package size might be reduced by replacing large libraries by smaller ones, using tree shaking where possible, code splitting and lazy-loading dependencies, or by other techniques. For more information checkout the [Bundle Analyzer github page](https://github.com/webpack-contrib/webpack-bundle-analyzer). + +## Usage + +The interactive view of the treemap is available at `http://localhost:8888` while running `npm run dev` in the terminal. + +![Bundle Analyzer example](assets/webpack-bundle-analyzer_example.png) + +The webpage can be automatically opened after running the command by setting `openAnalyzer: true` in `webpack.devel.js` + +``` + plugins: [ + new BundleAnalyzerPlugin( + { + openAnalyzer: true, + } + ) + ], +``` diff --git a/docs/dev/index.md b/docs/dev/index.md index 93f24cdeb..7ad54f1f8 100644 --- a/docs/dev/index.md +++ b/docs/dev/index.md @@ -1,7 +1,8 @@ # Development documentation -This documentation should contain dedicated information about the cookbook app. -No general information about the internals of nextcloud should be published here as these tend to change and thus get dated. +This documentation should contain dedicated information about the Cookbook app. +No general information about the internals of Nextcloud should be published here as these tend to change and thus get dated. + Instead we want to reference the official documentation on [docs.nextcloud.com](https://docs.nextcloud.com), especially the development manual. ## Github related information @@ -9,3 +10,8 @@ Instead we want to reference the official documentation on [docs.nextcloud.com]( - [Automatic deployment of new releases](deployment) - [Documentation using github pages](docs) - [Using a committed version for testing](use-autobuild) + + +## Frontend + +- [Webpack `BundleAnalyzer` Plugin](frontend/webpack-bundle-analyzer) \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 6a24f3b92..ec3271b4a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,10 +1,10 @@ -# Nextcloud cookbook app documentation +# Nextcloud Cookbook app documentation -This is the documentation area for the nextcloud cookbook app. +This is the documentation area for the Nextcloud Cookbook app. The documentation covers three different aspects of the app. - [Documentation for usage of the app as regular user](user/) -- [Documentation for the administrator of a nextcloud instance](admin/) +- [Documentation for the administrator of a Nextcloud instance](admin/) - [Documentation for developers](dev/) All the documentation can be found in the `/docs/` folder in the [app's repository]({{ site.github.url }}).