This repository has been archived by the owner on Feb 19, 2020. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for code splitting and static assets (#104)
* Add support for code splitting and static assets * Add docs on code splitting and ClientLibs * Move docs folder into project root * Fix duplicate files in Angular ClientLib * Add more doc comments to ClientLib config files * Update `react-scripts` and `aem-clientlib-generator`
- Loading branch information
1 parent
9532bc7
commit 6c713d4
Showing
15 changed files
with
12,163 additions
and
8,700 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# Code Splitting | ||
|
||
## Overview | ||
|
||
The React app is configured to make use of [code splitting](https://webpack.js.org/guides/code-splitting) by default. When building the app for production, the code will be output in several chunks: | ||
|
||
```sh | ||
$ ls build/static/js | ||
2.5b77f553.chunk.js | ||
2.5b77f553.chunk.js.map | ||
main.cff1a559.chunk.js | ||
main.cff1a559.chunk.js.map | ||
runtime~main.a8a9905a.js | ||
runtime~main.a8a9905a.js.map | ||
``` | ||
|
||
Loading chunks only when they are required can improve the app performance significantly. | ||
|
||
## Implementation | ||
|
||
To get this feature to work with AEM, the app needs to be able to identify which JS and CSS files need to be requested from the HTML generated by AEM. This can be achieved using the `"entrypoints"` key in the `asset-manifest.json` file: The file is parsed in `clientlib.config.js` and only the entrypoint files are bundled into the ClientLib. The remaining files are placed in the ClientLib's `resources` directory and will be requested dynamically and therefore only loaded when they are actually needed. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# SPA ClientLib | ||
|
||
The SPA is made available using an [AEM ClientLib](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/clientlibs.html). When executing `npm run build`, the app is built and the [`aem-clientlib-generator`](https://github.com/wcm-io-frontend/aem-clientlib-generator) package takes the resulting `build` directory and transforms it into such a ClientLib. | ||
|
||
The ClientLib will consist of the following files and directories: | ||
|
||
- `css/` | ||
- CSS files which need to be requested in the HTML | ||
- `js/` | ||
- JavaScript files which need to be requested in the HTML | ||
- `resources/` | ||
- Source maps | ||
- Non-entrypoint code chunks (see [Code Splitting](./code-splitting.md)) | ||
- Static assets (e.g. icons) | ||
- `css.txt` (tells AEM the order and names of files in `css/` so they can be merged) | ||
- `js.txt` (tells AEM the order and names of files in `js/` so they can be merged) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 44 additions & 28 deletions
72
src/main/resources/archetype-resources/angular-app/package-lock.json
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.