Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(110)

Side by Side Diff: docs/optimizing_web_uis.md

Issue 2936333002: WebUI: Replace vulcanize with polymer-bundler (Closed)
Patch Set: Address comments. Created 3 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/test/data/webui/polymer_browser_test_base.js ('k') | third_party/node/README.chromium » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 ```
OLDNEW
« no previous file with comments | « chrome/test/data/webui/polymer_browser_test_base.js ('k') | third_party/node/README.chromium » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698