docs: update optimization and source map section (#40037)
With this change we split the optimization and source map configuration section section into two, improve it overall by adding theoptions a table and add the new options (`inlineCritical` and `minify`) that have been introduced in CLI version 11.1 PR Close #40037
This commit is contained in:
Alan Agius
Alex Rickabaugh
parent
db97453ca0
commit
dcb3d176a6
|
|
@ -361,34 +361,161 @@ Files in that folder, such as `src/style-paths/_variables.scss`, can be imported
|
||||||
Note that you will also need to add any styles or scripts to the `test` builder if you need them for unit tests.
|
Note that you will also need to add any styles or scripts to the `test` builder if you need them for unit tests.
|
||||||
See also [Using runtime-global libraries inside your app](guide/using-libraries#using-runtime-global-libraries-inside-your-app).
|
See also [Using runtime-global libraries inside your app](guide/using-libraries#using-runtime-global-libraries-inside-your-app).
|
||||||
|
|
||||||
|
### Optimization configuration
|
||||||
|
|
||||||
{@a optimize-and-srcmap}
|
The `optimization` browser builder option can be either a Boolean or an Object for more fine-tune configuration. This option enables various optimizations of the build output, including:
|
||||||
|
|
||||||
### Optimization and source map configuration
|
- Minification of scripts and styles
|
||||||
|
- Tree-shaking
|
||||||
|
- Dead-code elimination
|
||||||
|
- Inlining of critical CSS
|
||||||
|
- Fonts inlining
|
||||||
|
|
||||||
The `optimization` and `sourceMap` browser builder options can be either a Boolean or an Object for more fine-grained configuration.
|
There are several options that can be used to fine-tune the optimization of an application.
|
||||||
In this section we will explain how to fine tune these options.
|
|
||||||
|
|
||||||
* The `optimization` option applies to scripts, styles and fonts. You can supply a value such as the following to apply optimization to one or the other:
|
<table class="is-full-width is-fixed-layout">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Option</th>
|
||||||
|
<th width="40%">Description</th>
|
||||||
|
<th>Value Type</th>
|
||||||
|
<th>Default Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>scripts</code></td>
|
||||||
|
<td>Enables optimization of the scripts output.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>styles</code></td>
|
||||||
|
<td>Enables optimization of the scripts output.</td>
|
||||||
|
<td><code>boolean|<a href="#styles-optimization-options">Styles optimization options</a></code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>fonts</code></td>
|
||||||
|
<td>Enables optimization for fonts.<br><strong>Note:</strong> This requires internet access.</td>
|
||||||
|
<td><code class="no-auto-link">boolean|<a href="#fonts-optimization-options">Fonts optimization options</a></code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
#### Styles optimization options
|
||||||
|
<table class="is-full-width is-fixed-layout">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Option</th>
|
||||||
|
<th width="40%">Description</th>
|
||||||
|
<th>Value Type</th>
|
||||||
|
<th>Default Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>minify</code></td>
|
||||||
|
<td>Minify CSS definitions by removing extraneous whitespace and comments, merging identifiers and minimizing values.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>inlineCritical</code></td>
|
||||||
|
<td>Extract and inline critical CSS definitions to improve <a href="https://web.dev/first-contentful-paint/">First Contentful Paint.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>false</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
#### Fonts optimization options
|
||||||
|
<table class="is-full-width is-fixed-layout">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Option</th>
|
||||||
|
<th width="40%">Description</th>
|
||||||
|
<th>Value Type</th>
|
||||||
|
<th>Default Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>inline</code></td>
|
||||||
|
<td>Reduce <a href="https://web.dev/render-blocking-resources/">render blocking requests</a> by inlining external Google fonts and icons CSS definitions in the application's HTML index file.<br><strong>Note:</strong>This requires internet access.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
You can supply a value such as the following to apply optimization to one or the other:
|
||||||
|
|
||||||
<code-example language="json">
|
<code-example language="json">
|
||||||
|
|
||||||
"optimization": {
|
"optimization": {
|
||||||
"scripts": true,
|
"scripts": true,
|
||||||
"styles": false,
|
"styles": {
|
||||||
|
"minify": true,
|
||||||
|
"inlineCritical": true
|
||||||
|
},
|
||||||
"fonts": true
|
"fonts": true
|
||||||
}
|
}
|
||||||
|
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
<div class="alert is-important">
|
<div class="alert is-helpful">
|
||||||
|
|
||||||
Fonts optimization requires internet access.
|
For [Universal](guide/glossary#universal), you can reduce the code rendered in the HTML page by
|
||||||
When enabled, render blocking requests will be reduced by inlining external Google fonts and icons CSS definitions in the application's HTML index file.
|
setting styles optimization to `true`.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
* The `sourceMap` option applies for both scripts and styles. You can also choose to output hidden source maps, or resolve vendor package source maps:
|
### Source map configuration
|
||||||
|
|
||||||
|
The `sourceMap` browser builder option can be either a Boolean or an Object for more fine-tune configuration to control the source maps of an application.
|
||||||
|
|
||||||
|
<table class="is-full-width is-fixed-layout">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Option</th>
|
||||||
|
<th width="40%">Description</th>
|
||||||
|
<th>Value Type</th>
|
||||||
|
<th>Default Value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><code>scripts</code></td>
|
||||||
|
<td>Output source maps for all scripts.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>styles</code></td>
|
||||||
|
<td>Output source maps for all styles.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>true</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>vendor</code></td>
|
||||||
|
<td>Resolve vendor packages source maps.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>false</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>hidden</code></td>
|
||||||
|
<td>Output source maps used for error reporting tools.</td>
|
||||||
|
<td><code class="no-auto-link">boolean</code></td>
|
||||||
|
<td><code>false</code></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
The example below shows how to toggle one or more values to configure the source map outputs:
|
||||||
|
|
||||||
<code-example language="json">
|
<code-example language="json">
|
||||||
|
|
||||||
|
|
@ -407,7 +534,4 @@ In this section we will explain how to fine tune these options.
|
||||||
These are useful if you only want source maps to map error stack traces in error reporting tools,
|
These are useful if you only want source maps to map error stack traces in error reporting tools,
|
||||||
but don't want to expose your source maps in the browser developer tools.
|
but don't want to expose your source maps in the browser developer tools.
|
||||||
|
|
||||||
For [Universal](guide/glossary#universal), you can reduce the code rendered in the HTML page by
|
|
||||||
setting styles optimization to `true` and styles source maps to `false`.
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue