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 |