d0ef1a9772
Vulcanize tool has been replaced with polymer-bundler. But also several other optimization tools are invoked when this flag is used (polymer-css-build, crisper, uglify), therefore the more generic "optimize_webui" name seems more appropriate. This is addressing an already existing TODO in the code. Bug: 731881 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: I0d25b1306141ef01f4d40a0cb9c0b79cccb6837f Reviewed-on: https://chromium-review.googlesource.com/663215 Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org> Reviewed-by: Dan Beam (no longer on Chrome) <dbeam@chromium.org> Cr-Commit-Position: refs/heads/master@{#502639}
125 lines
3.4 KiB
Markdown
125 lines
3.4 KiB
Markdown
# Optimizing Chrome Web UIs
|
|
|
|
## How do I do it?
|
|
|
|
In order to build with a fast configuration, try setting these options in your
|
|
GN args:
|
|
|
|
```
|
|
optimize_webui = true
|
|
is_debug = false
|
|
```
|
|
|
|
## How is the code optimized?
|
|
|
|
### Resource combination
|
|
|
|
[HTML imports](https://www.html5rocks.com/en/tutorials/webcomponents/imports/)
|
|
are a swell technology, but can be used is slow ways. Each import may also
|
|
contain additional imports, which must be satisfied before certain things can
|
|
continue (i.e. script execution may be paused).
|
|
|
|
```html
|
|
<!-- If a.html contains more imports... -->
|
|
<link rel="import" href="a.html">
|
|
<!-- This script is blocked until done. -->
|
|
<script> startThePageUp(); </script>
|
|
```
|
|
|
|
To reduce this latency, Chrome uses a tool created by the Polymer project named
|
|
[polymer-bundler](https://github.com/Polymer/polymer-bundler). It processes
|
|
a page starting from a URL entry point and inlines resources the first time
|
|
they're encountered. This greatly decreases latency due to HTML imports.
|
|
|
|
```html
|
|
<!-- Contents of a.html and all its dependencies. -->
|
|
<script> startThePageUp(); </script>
|
|
```
|
|
|
|
### CSS @apply to --var transformation
|
|
|
|
We also use
|
|
[polymer-css-build](https://github.com/PolymerLabs/polymer-css-build) to
|
|
transform CSS @apply mixins (which are not yet natively supported) into faster
|
|
--css-variables. This turns something like this:
|
|
|
|
```css
|
|
:host {
|
|
--mixin-name: {
|
|
color: red;
|
|
display: block;
|
|
};
|
|
}
|
|
/* In a different place */
|
|
.red-thing {
|
|
@apply(--mixin-name);
|
|
}
|
|
```
|
|
|
|
into the more performant:
|
|
|
|
```css
|
|
:host {
|
|
--mixin-name_-_color: red;
|
|
--mixin-name_-_display: block;
|
|
}
|
|
/* In a different place */
|
|
.red-thing {
|
|
color: var(--mixin-name_-_color);
|
|
display: var(--mixin-name_-_display);
|
|
}
|
|
```
|
|
|
|
### JavaScript Minification
|
|
|
|
In order to minimize disk size, we run
|
|
[uglifyjs](https://github.com/mishoo/UglifyJS2) on all combined JavaScript. This
|
|
reduces installer and the size of resources required to load to show a UI.
|
|
|
|
Code like this:
|
|
|
|
```js
|
|
function fizzBuzz() {
|
|
for (var i = 1; i <= 100; i++) {
|
|
var fizz = i % 3 == 0 ? 'fizz' : '';
|
|
var buzz = i % 5 == 0 ? 'buzz' : '';
|
|
console.log(fizz + buzz || i);
|
|
}
|
|
}
|
|
fizzBuzz();
|
|
```
|
|
|
|
would be minified to:
|
|
|
|
```js
|
|
function fizzBuzz(){for(var z=1;100>=z;z++){var f=z%3==0?"fizz":"",o=z%5==0?"buzz":"";console.log(f+o||z)}}fizzBuzz();
|
|
```
|
|
|
|
If you'd like to more easily debug minified code, click the "{}" prettify button
|
|
in Chrome's developer tools, which will beautify the code and allow setting
|
|
breakpoints on the un-minified version.
|
|
|
|
### Gzip compression of web resources
|
|
|
|
In certain cases, it might be preferable to leave web resources compressed on
|
|
disk and inflate them when needed (i.e. when a user wants to see a page).
|
|
|
|
In this case, you can run `gzip --rsyncable` on a resource before it's put into
|
|
a .pak file via GRIT with this syntax:
|
|
|
|
```xml
|
|
<include name="IDR_MY_PAGE" file="my/page.html" type="BINDATA" compress="gzip" />
|
|
```
|
|
|
|
Gzip is currently set up to apply to a whole WebUI's data source, though it's
|
|
possible to exclude specific paths for things like dynamically generated content
|
|
(i.e. many pages load translations dynamically from a path named "strings.js").
|
|
|
|
To mark a WebUI's resources compressed, you'll need to do something like:
|
|
|
|
```c++
|
|
WebUIDataSource* data_source = WebUIDataSource::Create(...);
|
|
data_source->SetDefaultResource(IDR_MY_PAGE);
|
|
data_source->UseGzip({"strings.js", ...}); // Omit arg to compress everything
|
|
```
|