0

Vulcanize MD History to improve page-load performance

Vulcanize is a module which concatenates HTML/JS files together and
greatly improves load-time performance for Polymer WebUI pages. This CL
generalises the vulcanize script used for MD Downloads so that it can
be used for history as well. Also adds uglifyjs to the vulcanize
toolchain, which is used to strip excess comments and whitespace from
the generated files.

The net result is a saving of 25% on the time taken to load the MD
History page (average times 1005ms vs 750ms, n=5), but an approximately
450Kb increase to the size of resources.pak. A follow-up CL to strip
comments from the vulcanize output will reduce this size increase to
150Kb.

BUG=629406
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
NOPRESUBMIT=true
TBR=phajdan.jr@chromium.org

Review-Url: https://codereview.chromium.org/2224003003
Cr-Commit-Position: refs/heads/master@{#412420}
This commit is contained in:
tsergeant
2016-08-16 19:06:41 -07:00
committed by Commit bot
parent 702d65e434
commit 72f1b52495
17 changed files with 19454 additions and 68 deletions

56
docs/vulcanize.md Normal file

@ -0,0 +1,56 @@
# Vulcanizing Chrome Polymer UIs
`vulcanize` is an npm module used to combine resources. In order to make the
Material Design downloads and history pages sufficiently fast, we run vulcanize
on the source files to combine them and reduce blocking load/parse time.
## Required software
Vulcanization currently requires:
- node.js: >= v4.4.2 (can be found with `node --version`)
- npm: >= 1.3.10 (can be found with `npm --version`)
- vulcanize: 1.14.8 (can be found with `vulcanize --version`)
- crisper: 2.0.1 (can be found with `npm list -g crisper`)
## Installing required software
For instructions on installing node and npm, see
[here](https://docs.npmjs.com/getting-started/installing-node).
We recommend telling npm where to store downloaded modules:
```bash
$ npm config set -g prefix "$HOME/node_modules"
```
Then install the required modules:
```bash
$ npm install -g crisper vulcanize
```
Ultimately, all that is required to run this script is that `crisper` and
`vulcanize` are on your `$PATH`.
## Combining resources with vulcanize
To combine all the CSS/HTML/JS for all pages which use vulcanize, making them
production fast, you can run the command:
```bash
$ chrome/browser/resources/vulcanize.py # from src/
```
This should overwrite the following files:
- chrome/browser/resources/md_downloads/
- vulcanized.html (all <link rel=import> and stylesheets inlined)
- crisper.js (all JavaScript, extracted from vulcanized.html)
- chrome/browser/resources/md_history/
- app.vulcanized.html
- app.crisper.js
## Testing downloads without vulcanizing
Build with `use_vulcanize = false` in your gn args to build without vulcanizing.