docs: convert png diagrams to svg (#9208)

This commit is contained in:
Tony Trinh 2022-07-21 04:32:41 -05:00 committed by GitHub
parent fa97bf3c3d
commit 6adb90695b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 140 additions and 4 deletions

View File

@ -0,0 +1,22 @@
<script setup lang="ts">
defineProps<{ svg: string }>()
</script>
<template>
<figure class="svg-image-root" v-html="svg" />
</template>
<style>
.svg-image-root {
background-color: #eee;
border-radius: 8px;
padding: 1ch;
margin: 1ch 0;
}
html.dark .svg-image-root {
background-color: #313641;
}
.svg-image-root svg text {
font-family: var(--vp-font-family-base);
}
</style>

View File

@ -3,6 +3,7 @@ import Theme from 'vitepress/theme'
import './styles/vars.css'
import HomeSponsors from './components/HomeSponsors.vue'
import AsideSponsors from './components/AsideSponsors.vue'
import SvgImage from './components/SvgImage.vue'
export default {
...Theme,
@ -11,5 +12,8 @@ export default {
'home-features-after': () => h(HomeSponsors),
'aside-ads-before': () => h(AsideSponsors)
})
},
enhanceApp({ app }) {
app.component('SvgImage', SvgImage)
}
}

View File

@ -538,7 +538,10 @@ Vite automatically generates `<link rel="modulepreload">` directives for entry c
In real world applications, Rollup often generates "common" chunks - code that is shared between two or more other chunks. Combined with dynamic imports, it is quite common to have the following scenario:
![graph](/images/graph.png)
<script setup>
import graphSvg from '../images/graph.svg?raw'
</script>
<svg-image :svg="graphSvg" />
In the non-optimized scenarios, when async chunk `A` is imported, the browser will have to request and parse `A` before it can figure out that it also needs the common chunk `C`. This results in an extra network roundtrip:

View File

@ -24,9 +24,12 @@ Vite improves the dev server start time by first dividing the modules in an appl
Vite serves source code over [native ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.
![bundler based dev server](/images/bundler.png)
![esm based dev server](/images/esm.png)
<script setup>
import bundlerSvg from '../images/bundler.svg?raw'
import esmSvg from '../images/esm.svg?raw'
</script>
<svg-image :svg="bundlerSvg" />
<svg-image :svg="esmSvg" />
### Slow Updates

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

37
docs/images/bundler.svg Normal file
View File

@ -0,0 +1,37 @@
<svg viewBox="0 0 1896 1071" fill="none" xmlns="http://www.w3.org/2000/svg">
<text fill="#FFAA3E" xml:space="preserve" style="white-space: pre" font-size="80" letter-spacing="0em"><tspan x="46" y="132.344">Bundle based dev server</tspan></text>
<rect x="48" y="239" width="1086" height="767" rx="98" stroke="#FFC36B" stroke-width="4"/>
<rect x="108" y="577" width="212" height="83" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="170" y="631.488">entry</tspan></text>
<rect x="476" y="712" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0.33em"><tspan x="552.5" y="768.988">&#xb7;&#xb7;&#xb7;</tspan></text>
<rect x="476" y="438" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="537" y="494.988">route</tspan></text>
<rect x="473" y="576" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="534" y="632.988">route</tspan></text>
<path d="M472.614 481.699L438.815 489.291L462.289 514.766L472.614 481.699ZM324.582 622.18L454.791 502.201L450.726 497.789L320.516 617.768L324.582 622.18Z" fill="#E06666"/>
<path d="M469 620L439 602.679V637.321L469 620ZM323 623H442V617H323V623Z" fill="#E06666"/>
<path d="M472.614 756.105L462.032 723.12L438.757 748.777L472.614 756.105ZM320.533 622.196L450.601 740.186L454.632 735.742L324.565 617.752L320.533 622.196Z" fill="#E06666"/>
<path d="M822.052 905.098L815.036 871.175L789.166 894.213L822.052 905.098ZM689.041 760.243L801.856 886.929L806.337 882.939L693.521 756.253L689.041 760.243Z" fill="#FFC36B"/>
<path d="M819.908 756.105L811.894 722.403L786.715 746.195L819.908 756.105ZM689.1 622.034L799.185 738.54L803.546 734.419L693.462 617.914L689.1 622.034Z" fill="#FFC36B"/>
<path d="M817.765 623.19L788.215 605.112L787.334 639.742L817.765 623.19ZM691.205 622.973L790.697 625.502L790.85 619.504L691.357 616.975L691.205 622.973Z" fill="#FFC36B"/>
<path d="M818.837 481.699L789.286 463.622L788.406 498.252L818.837 481.699ZM692.277 481.483L791.769 484.012L791.922 478.014L692.429 475.485L692.277 481.483Z" fill="#FFC36B"/>
<path d="M819.909 340.209L786.924 350.795L812.584 374.067L819.909 340.209ZM696.719 480.499L803.992 362.224L799.547 358.193L692.275 476.468L696.719 480.499Z" fill="#FFC36B"/>
<path d="M817.765 614.614L810.467 580.751L784.789 604.002L817.765 614.614ZM692.273 480.497L797.418 596.614L801.866 592.587L696.721 476.47L692.273 480.497Z" fill="#FFC36B"/>
<rect x="822" y="288" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="864" y="344.988">module</tspan></text>
<rect x="822" y="435" width="212" height="87" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="864" y="491.488">module</tspan></text>
<rect x="820" y="571" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="862" y="627.988">module</tspan></text>
<rect x="822" y="718" width="212" height="87" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="864" y="774.488">module</tspan></text>
<rect x="822" y="864" width="212" height="88" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0.33em"><tspan x="898.5" y="920.988">&#xb7;&#xb7;&#xb7;</tspan></text>
<path d="M1239 627L1209 609.679V644.321L1239 627ZM1136 630H1212V624H1136V630Z" fill="#FFC36B"/>
<path d="M1596 627L1566 609.679V644.321L1596 627ZM1493 630H1569V624H1493V630Z" fill="#FFC36B"/>
<rect x="1239" y="545" width="254" height="144" rx="10" fill="#C692EA"/>
<text fill="white" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1306.5" y="629.988">Bundle</tspan></text>
<rect x="1596" y="543" width="254" height="143" rx="10" fill="#009688"/>
<text fill="white" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1667.71" y="604.988">Server&#10;</tspan><tspan x="1675.76" y="649.988">ready</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
docs/images/diagrams.fig Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

51
docs/images/esm.svg Normal file
View File

@ -0,0 +1,51 @@
<svg viewBox="0 0 1896 1071" fill="none" xmlns="http://www.w3.org/2000/svg">
<text fill="#FFAA3E" xml:space="preserve" style="white-space: pre" font-size="80" letter-spacing="0em"><tspan x="45" y="129.344">Native ESM based dev server</tspan></text>
<rect x="632" y="526" width="273" height="106" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="724.5" y="591.988">entry</tspan></text>
<rect x="1106" y="699" width="274" height="114" rx="10" fill="#666665"/>
<g filter="url(#filter0_d_5_61)">
<text fill="#CCCCCB" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0.33em"><tspan x="1213.5" y="768.988">&#xb7;&#xb7;&#xb7;</tspan></text>
</g>
<rect x="1106" y="346" width="274" height="113" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1198" y="415.488">route</tspan></text>
<rect x="1102" y="524" width="273" height="114" rx="10" fill="#666665"/>
<text fill="#CCCCCB" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1193.5" y="593.988">route</tspan></text>
<path d="M1101.79 402.463L1067.99 410.054L1091.46 435.529L1101.79 402.463ZM910.168 583.106L1083.96 422.965L1079.9 418.553L906.102 578.693L910.168 583.106Z" fill="#C892E9"/>
<path d="M1097 581L1067 563.679V598.321L1097 581ZM908 584H1070V578H908V584Z" fill="#999899"/>
<path d="M1101.79 756.57L1091.2 723.584L1067.93 749.242L1101.79 756.57ZM906.119 583.121L1079.77 740.651L1083.8 736.207L910.151 578.677L906.119 583.121Z" fill="#999899"/>
<path d="M1552.72 948.839L1545.7 914.916L1519.83 937.953L1552.72 948.839ZM1381.73 761.331L1532.52 930.67L1537 926.68L1386.21 757.341L1381.73 761.331Z" fill="#999899"/>
<path d="M1549.95 756.569L1541.94 722.868L1516.76 746.659L1549.95 756.569ZM1381.79 582.96L1529.23 739.005L1533.59 734.884L1386.15 578.839L1381.79 582.96Z" fill="#999899"/>
<path d="M1547.19 585.049L1517.64 566.972L1516.76 601.602L1547.19 585.049ZM1383.89 583.898L1520.12 587.362L1520.27 581.364L1384.04 577.9L1383.89 583.898Z" fill="#999899"/>
<path d="M1548.57 402.463L1519.02 384.386L1518.14 419.015L1548.57 402.463ZM1385.27 401.312L1521.5 404.776L1521.66 398.778L1385.43 395.314L1385.27 401.312Z" fill="#C892E9"/>
<path d="M631.489 585.049L601.583 567.567L601.396 602.207L631.489 585.049ZM375.576 586.666L604.473 587.903L604.506 581.903L375.608 580.666L375.576 586.666Z" fill="#C892E9"/>
<path d="M1549.95 219.877L1516.97 230.462L1542.63 253.735L1549.95 219.877ZM1390.34 400.329L1534.04 241.892L1529.59 237.861L1385.89 396.298L1390.34 400.329Z" fill="#C892E9"/>
<path d="M1547.19 573.983L1539.89 540.12L1514.21 563.372L1547.19 573.983ZM1385.89 400.327L1526.84 555.983L1531.29 551.956L1390.34 396.3L1385.89 400.327Z" fill="#C892E9"/>
<rect x="1553" y="152" width="274" height="113" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1626" y="221.488">module</tspan></text>
<rect x="1553" y="341" width="274" height="114" rx="10" fill="#4FC08D"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1621.5" y="411.818">module</tspan></text>
<rect x="1550" y="517" width="274" height="114" rx="10" fill="#666665"/>
<text fill="#CCCCCB" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1623" y="586.988">module</tspan></text>
<rect x="1553" y="707" width="274" height="113" rx="10" fill="#666665"/>
<text fill="#CCCCCB" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="1626" y="776.488">module</tspan></text>
<rect x="1553" y="896" width="274" height="113" rx="10" fill="#666665"/>
<text fill="#CCCCCB" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0.33em"><tspan x="1660.5" y="965.488">&#xb7;&#xb7;&#xb7;</tspan></text>
<rect x="45" y="491" width="330" height="179" rx="10" fill="#029788"/>
<text fill="white" xml:space="preserve" style="white-space: pre" font-size="38" font-weight="600" letter-spacing="0em"><tspan x="154.707" y="570.988">Server&#10;</tspan><tspan x="162.76" y="615.988">ready</tspan></text>
<line x1="507.615" y1="459.201" x2="506.232" y2="569.859" stroke="#C892E9" stroke-width="4" stroke-dasharray="8 8"/>
<line x1="1038.78" y1="733.073" x2="1037.37" y2="883.845" stroke="#E06666" stroke-width="4" stroke-dasharray="8 8"/>
<text fill="#E06666" xml:space="preserve" style="white-space: pre" font-size="38" letter-spacing="0em"><tspan x="918" y="938.988">Dynamic import&#10;</tspan><tspan x="918" y="983.988">(code split point)</tspan></text>
<text fill="#C892E9" xml:space="preserve" style="white-space: pre" font-size="38" letter-spacing="0em"><tspan x="399" y="431.488">HTTP request</tspan></text>
<defs>
<filter id="filter0_d_5_61" x="1212.15" y="752.766" width="60.9863" height="13.2324" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5_61"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5_61" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

16
docs/images/graph.svg Normal file
View File

@ -0,0 +1,16 @@
<svg viewBox="0 0 1440 495" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="191" width="315" height="146" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="40" font-weight="600" letter-spacing="0em"><tspan x="105.5" y="278.545">Entry</tspan></text>
<rect x="556" width="360" height="141" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="40" font-weight="600" letter-spacing="0em"><tspan x="594" y="85.0455">async chunk A</tspan></text>
<rect x="1080" y="169" width="360" height="141" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="40" font-weight="600" letter-spacing="0em"><tspan x="1091.5" y="254.045">common chunk C</tspan></text>
<rect x="556" y="354" width="360" height="141" rx="10" fill="#C3E88C"/>
<text fill="#15505C" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="40" font-weight="600" letter-spacing="0em"><tspan x="595.5" y="439.045">async chunk B</tspan></text>
<path d="M546.44 71.5452C546.741 70.1977 545.893 68.8613 544.545 68.5602L522.587 63.6533C521.239 63.3522 519.903 64.2004 519.602 65.5479C519.301 66.8954 520.149 68.2318 521.496 68.5329L541.015 72.8946L536.653 92.4132C536.352 93.7607 537.2 95.0971 538.548 95.3983C539.895 95.6994 541.232 94.8511 541.533 93.5036L546.44 71.5452ZM326.34 212.111L334.161 207.146L331.482 202.925L323.66 207.889L326.34 212.111ZM349.804 197.218L365.447 187.289L362.767 183.068L347.125 192.996L349.804 197.218ZM381.09 177.361L396.733 167.432L394.053 163.211L378.41 173.139L381.09 177.361ZM412.375 157.504L428.018 147.575L425.339 143.354L409.696 153.282L412.375 157.504ZM443.661 137.646L459.304 127.718L456.625 123.496L440.982 133.425L443.661 137.646ZM474.947 117.789L490.59 107.861L487.91 103.639L472.267 113.568L474.947 117.789ZM506.233 97.9322L521.875 88.0036L519.196 83.7821L503.553 93.7107L506.233 97.9322ZM537.518 78.075L545.34 73.1107L542.66 68.8893L534.839 73.8536L537.518 78.075ZM548.88 72.0904C549.482 69.3955 547.785 66.7226 545.09 66.1204L501.174 56.3065C498.479 55.7043 495.806 57.4008 495.203 60.0958C494.601 62.7907 496.298 65.4636 498.993 66.0658L538.03 74.7892L529.307 113.826C528.704 116.521 530.401 119.194 533.096 119.796C535.791 120.399 538.464 118.702 539.066 116.007L548.88 72.0904ZM327.679 214.221L335.501 209.257L330.142 200.814L322.321 205.779L327.679 214.221ZM351.144 199.329L366.787 189.4L361.428 180.957L345.785 190.886L351.144 199.329ZM382.429 179.471L398.072 169.543L392.713 161.1L377.071 171.029L382.429 179.471ZM413.715 159.614L429.358 149.686L423.999 141.243L408.356 151.171L413.715 159.614ZM445.001 139.757L460.644 129.829L455.285 121.386L439.642 131.314L445.001 139.757ZM476.287 119.9L491.929 109.971L486.571 101.529L470.928 111.457L476.287 119.9ZM507.572 100.043L523.215 90.1143L517.856 81.6714L502.213 91.6L507.572 100.043ZM538.858 80.1858L546.679 75.2215L541.321 66.7785L533.499 71.7428L538.858 80.1858Z" fill="#0B7285"/>
<path d="M544.718 442.395C546.04 441.998 546.791 440.605 546.395 439.282L539.935 417.729C539.539 416.407 538.145 415.656 536.823 416.052C535.5 416.449 534.749 417.842 535.146 419.165L540.888 438.323L521.729 444.065C520.407 444.461 519.656 445.855 520.052 447.177C520.449 448.5 521.842 449.251 523.165 448.854L544.718 442.395ZM323.814 324.201L331.636 328.415L334.007 324.013L326.186 319.799L323.814 324.201ZM347.278 336.844L362.921 345.272L365.293 340.871L349.65 332.442L347.278 336.844ZM378.564 353.701L394.207 362.129L396.579 357.728L380.936 349.299L378.564 353.701ZM409.85 370.558L425.493 378.987L427.864 374.585L412.222 366.156L409.85 370.558ZM441.136 387.415L456.778 395.844L459.15 391.442L443.507 383.013L441.136 387.415ZM472.421 404.272L488.064 412.701L490.436 408.299L474.793 399.871L472.421 404.272ZM503.707 421.129L519.35 429.558L521.722 425.156L506.079 416.728L503.707 421.129ZM534.993 437.987L542.814 442.201L545.186 437.799L537.364 433.585L534.993 437.987ZM545.435 444.79C548.081 443.997 549.582 441.21 548.79 438.565L535.871 395.459C535.078 392.814 532.291 391.312 529.646 392.105C527 392.898 525.499 395.685 526.292 398.33L537.775 436.646L499.459 448.129C496.814 448.922 495.312 451.709 496.105 454.354C496.898 457 499.685 458.501 502.33 457.708L545.435 444.79ZM322.628 326.402L330.45 330.616L335.193 321.813L327.372 317.598L322.628 326.402ZM346.093 339.045L361.735 347.473L366.479 338.67L350.836 330.241L346.093 339.045ZM377.378 355.902L393.021 364.33L397.765 355.527L382.122 347.098L377.378 355.902ZM408.664 372.759L424.307 381.187L429.05 372.384L413.407 363.955L408.664 372.759ZM439.95 389.616L455.593 398.045L460.336 389.241L444.693 380.813L439.95 389.616ZM471.235 406.473L486.878 414.902L491.622 406.098L475.979 397.67L471.235 406.473ZM502.521 423.33L518.164 431.759L522.907 422.955L507.265 414.527L502.521 423.33ZM533.807 440.187L541.628 444.402L546.372 435.598L538.55 431.384L533.807 440.187Z" fill="#0B7285"/>
<text fill="#0B7285" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="35" letter-spacing="0em"><tspan x="172" y="98.7273">dynamic import</tspan></text>
<text fill="#1864AB" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="35" letter-spacing="0em"><tspan x="1013" y="83.7273">direct import</tspan></text>
<path d="M1071.89 171.899C1074.05 171.404 1075.39 169.258 1074.9 167.105L1066.85 132.017C1066.35 129.864 1064.21 128.519 1062.05 129.014C1059.9 129.508 1058.55 131.654 1059.05 133.807L1066.21 164.996L1035.02 172.154C1032.86 172.648 1031.52 174.795 1032.01 176.948C1032.51 179.101 1034.65 180.446 1036.81 179.952L1071.89 171.899ZM918.876 77.3895L1068.88 171.389L1073.12 164.611L923.124 70.6105L918.876 77.3895Z" fill="#1864AB"/>
<path d="M1074.95 317.66C1075.31 315.481 1073.84 313.419 1071.66 313.055L1036.15 307.114C1033.97 306.75 1031.91 308.22 1031.55 310.399C1031.18 312.578 1032.65 314.64 1034.83 315.004L1066.39 320.285L1061.11 351.846C1060.75 354.025 1062.22 356.087 1064.4 356.452C1066.58 356.816 1068.64 355.345 1069 353.167L1074.95 317.66ZM923.323 427.256L1073.32 320.256L1068.68 313.744L918.677 420.744L923.323 427.256Z" fill="#1864AB"/>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB