<commit_before>Frontend loading in CleverStyle Framework might occur in different ways.

Depending on system configuration sources minification, combining, vulcanization, preloading and other useful features might happen to your CSS/JavaScript/HTML under the hood.

#### Caching, minification and combining
When *Cache and compress JavaScript, CSS and HTML* option is enabled in system administration, following will happen under the hood:
* CSS and HTML files will be analyzed
* small (under 4 KiB) files like images and fonts will be embedded into resulting CSS
* relative paths to larger files in CSS will be corrected to absolute (since cached CSS file will be located in another place), `?md5_hash` will be added based on file contents (replaces existing query string if there was any)
* CSS imports will be also embedded into parent CSS
* JS inside of HTML files (both inline and `script[src]`) will be combined into one block and inlined
* CSS inside of HTML (both inline and `link[rel=import][type=css]`) will go through the same procedure as regular CSS files and will be inlined
* CSS and JS code will additionally go through simple minification process
* Everything will be compressed with Gzip and placed in `/storage/pcache`

During this process files are combined into logical bundles while taking into account dependencies between components.
All necessary dependencies structures and information about bundled files are cached in `/strorage/pcache` in JSON files.

#### Vulcanization
If vulcanization is enabled, then CSS and JS will be left inlined in HTML files, otherwise they will be placed into separate files in order to be CSP-compatible.
NOTE: CSS is always inlined currently, this is because Polymer only supports `style[is=custom-style]`, but no `link`-based counterpart.

#### Frontend loading
CleverStyle Framework uses dependencies between components to load files in following order:
* system files from `/includes/{css|js|html}`
* theme files from `/themes/{theme_name}/{css|js|html}`
* globally used files of components (files that are not listed in [map.json](/docs/quick-start/Module-architecture.md#includesmapjson) file and included on any page)
* files from all dependencies of current module (preserving order between dependencies themselves if any as well)
* module files from `/components/modules/{module_name}/{css|js|html}`

#### Optimized frontend loading
In this mode system files, theme files and globally used files of components are loaded first and when they finish loading completely the rest of files are loaded afterwards.
This typically increases speed of initial page load.

This feature is only available when caching is used.

#### Preloading
System automatically generates `Link: rel=preload` headers that are typically used for HTTP2 Server Push, additionally corresponding `link[rel=preload]` tags are generated.
This feature takes into account optimized frontend loading and if used will only use files that are loaded initially.

Preloading feature is smart enough to preload images and fonts from within CSS files that are not inlined (but skips files that had `?` in URL, you can use this to avoid preloading non-critical fonts and images).
<commit_msg>Added information about jQuery and other AMD modules to docs<commit_after>Frontend loading in CleverStyle Framework might occur in different ways.

Depending on system configuration sources minification, combining, vulcanization, preloading and other useful features might happen to your CSS/JavaScript/HTML under the hood.

#### Caching, minification and combining
When *Cache and compress JavaScript, CSS and HTML* option is enabled in system administration, following will happen under the hood:
* CSS and HTML files will be analyzed
* small (under 4 KiB) files like images and fonts will be embedded into resulting CSS
* relative paths to larger files in CSS will be corrected to absolute (since cached CSS file will be located in another place), `?md5_hash` will be added based on file contents (replaces existing query string if there was any)
* CSS imports will be also embedded into parent CSS
* JS inside of HTML files (both inline and `script[src]`) will be combined into one block and inlined
* CSS inside of HTML (both inline and `link[rel=import][type=css]`) will go through the same procedure as regular CSS files and will be inlined
* CSS and JS code will additionally go through simple minification process
* Everything will be compressed with Gzip and placed in `/storage/pcache`

During this process files are combined into logical bundles while taking into account dependencies between components.
All necessary dependencies structures and information about bundled files are cached in `/strorage/pcache` in JSON files.

#### Vulcanization
If vulcanization is enabled, then CSS and JS will be left inlined in HTML files, otherwise they will be placed into separate files in order to be CSP-compatible.
NOTE: CSS is always inlined currently, this is because Polymer only supports `style[is=custom-style]`, but no `link`-based counterpart.

#### Frontend loading
CleverStyle Framework uses dependencies between components to load files in following order:
* system files from `/includes/{css|js|html}`
* theme files from `/themes/{theme_name}/{css|js|html}`
* globally used files of components (files that are not listed in [map.json](/docs/quick-start/Module-architecture.md#includesmapjson) file and included on any page)
* files from all dependencies of current module (preserving order between dependencies themselves if any as well)
* module files from `/components/modules/{module_name}/{css|js|html}`

#### Optimized frontend loading
In this mode system files, theme files and globally used files of components are loaded first and when they finish loading completely the rest of files are loaded afterwards.
This typically increases speed of initial page load.

This feature is only available when caching is used.

#### Preloading
System automatically generates `Link: rel=preload` headers that are typically used for HTTP2 Server Push, additionally corresponding `link[rel=preload]` tags are generated.
This feature takes into account optimized frontend loading and if used will only use files that are loaded initially.

Preloading feature is smart enough to preload images and fonts from within CSS files that are not inlined (but skips files that had `?` in URL, you can use this to avoid preloading non-critical fonts and images).

#### jQuery and other bundled third-party libraries
System includes few third-party libraries that are available as AMD modules, they can be found in [/includes/js/modules](/includes/js/modules) directory.
Also Polymer, Alameda and sprintf.js are always present unconditionally.

jQuery is a bit tricky. It is also loaded unconditionally, but since it is quite large and is not required on initial stages of frontend loading, if optimized frontend loading is used its loading will be delayed.
If you need jQuery on earlier stages, make sure that you call it as AMD module, this way everything will work as you would expect.

Also in future jQuery will likely be either removed from System core or loaded as AMD module only, so generally it is highly recommended to always call jQuery as AMD module using Alameda:
```javascript
// Like this
require(['jquery'], function ($) {
    // Use jQuery
});
// Or this:
require(['jquery']).then(function (modules) {
    var $ = modules[0];
    // Use jQuery
});
```

{'fraction_non_alphanumeric': 0.05679540291327008, 'fraction_numerical': 0.0009354536950420954, 'mean_word_length': 5.084552845528456, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6890176', 'n_tokens_mistral': 1765, 'n_tokens_neox': 1714, 'n_words': 1046}