| OLD | NEW |
| 1 # Optimizing Chrome Web UIs | 1 # Optimizing Chrome Web UIs |
| 2 | 2 |
| 3 ## How do I do it? | 3 ## How do I do it? |
| 4 | 4 |
| 5 In order to build with a fast configuration, try setting these options in your | 5 In order to build with a fast configuration, try setting these options in your |
| 6 GN args: | 6 GN args: |
| 7 | 7 |
| 8 ``` | 8 ``` |
| 9 use_vulcanize = true | 9 use_vulcanize = true |
| 10 is_debug = false | 10 is_debug = false |
| 11 ``` | 11 ``` |
| 12 | 12 |
| 13 ## How is the code optimized? | 13 ## How is the code optimized? |
| 14 | 14 |
| 15 ### Resource combination | 15 ### Resource combination |
| 16 | 16 |
| 17 [HTML imports](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) | 17 [HTML imports](https://www.html5rocks.com/en/tutorials/webcomponents/imports/) |
| 18 are a swell technology, but can be used is slow ways. Each import may also | 18 are a swell technology, but can be used is slow ways. Each import may also |
| 19 contain additional imports, which must be satisfied before certain things can | 19 contain additional imports, which must be satisfied before certain things can |
| 20 continue (i.e. script execution may be paused). | 20 continue (i.e. script execution may be paused). |
| 21 | 21 |
| 22 ```html | 22 ```html |
| 23 <!-- If a.html contains more imports... --> | 23 <!-- If a.html contains more imports... --> |
| 24 <link rel="import" href="a.html"> | 24 <link rel="import" href="a.html"> |
| 25 <!-- This script is blocked until done. --> | 25 <!-- This script is blocked until done. --> |
| 26 <script> startThePageUp(); </script> | 26 <script> startThePageUp(); </script> |
| 27 ``` | 27 ``` |
| 28 | 28 |
| 29 To reduce this latency, Chrome uses a tool created by the Polymer project named | 29 To reduce this latency, Chrome uses a tool created by the Polymer project named |
| 30 [vulcanize](https://github.com/Polymer/polymer-bundler/tree/1.x). It processes | 30 [polymer-bundler](https://github.com/Polymer/polymer-bundler). It processes |
| 31 a page starting from a URL entry point and inlines resources the first time | 31 a page starting from a URL entry point and inlines resources the first time |
| 32 they're encountered. This greatly decreases latency due to HTML imports. | 32 they're encountered. This greatly decreases latency due to HTML imports. |
| 33 | 33 |
| 34 ```html | 34 ```html |
| 35 <!-- Contents of a.html and all its dependencies. --> | 35 <!-- Contents of a.html and all its dependencies. --> |
| 36 <script> startThePageUp(); </script> | 36 <script> startThePageUp(); </script> |
| 37 ``` | 37 ``` |
| 38 | 38 |
| 39 ### CSS @apply to --var transformation | 39 ### CSS @apply to --var transformation |
| 40 | 40 |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 117 | 117 |
| 118 To mark a WebUI's resources compressed, you'll need to do something like: | 118 To mark a WebUI's resources compressed, you'll need to do something like: |
| 119 | 119 |
| 120 ```c++ | 120 ```c++ |
| 121 WebUIDataSource* data_source = WebUIDataSource::Create(...); | 121 WebUIDataSource* data_source = WebUIDataSource::Create(...); |
| 122 data_source->SetDefaultResource(IDR_MY_PAGE); | 122 data_source->SetDefaultResource(IDR_MY_PAGE); |
| 123 std::unordered_set<std::string> exclusions; | 123 std::unordered_set<std::string> exclusions; |
| 124 exclusions.insert("strings.js"); // if required | 124 exclusions.insert("strings.js"); // if required |
| 125 data_source->UseGzip(exclusions); | 125 data_source->UseGzip(exclusions); |
| 126 ``` | 126 ``` |
| OLD | NEW |