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:
chrome
browser
test
data
webui
md_history
docs
third_party/polymer/v1_0
tools/copyright_scanner
ui/webui/resources/html
56
docs/vulcanize.md
Normal file
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.
|
Reference in New Issue
Block a user