diff --git a/docs/.vitepress/theme/components/SvgImage.vue b/docs/.vitepress/theme/components/SvgImage.vue new file mode 100644 index 00000000000000..3440988030d2db --- /dev/null +++ b/docs/.vitepress/theme/components/SvgImage.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 3b4d7e38df76ab..39f1f2ffcae120 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -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) } } diff --git a/docs/guide/features.md b/docs/guide/features.md index b7449e15bfc1c9..db1f45b4ddeb99 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -538,7 +538,10 @@ Vite automatically generates `` 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) + + 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: diff --git a/docs/guide/why.md b/docs/guide/why.md index bc72b5a3ebbfe5..24b1acfef6358f 100644 --- a/docs/guide/why.md +++ b/docs/guide/why.md @@ -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) + + + ### Slow Updates diff --git a/docs/images/bundler.png b/docs/images/bundler.png deleted file mode 100644 index 22d0a072dc7303..00000000000000 Binary files a/docs/images/bundler.png and /dev/null differ diff --git a/docs/images/bundler.svg b/docs/images/bundler.svg new file mode 100644 index 00000000000000..598f708c8c5cc5 --- /dev/null +++ b/docs/images/bundler.svg @@ -0,0 +1,37 @@ + +Bundle based dev server + + +entry + +··· + +route + +route + + + + + + + + + + +module + +module + +module + +module + +··· + + + +Bundle + +Server ready + diff --git a/docs/images/diagrams.fig b/docs/images/diagrams.fig new file mode 100644 index 00000000000000..300edd04609ba8 Binary files /dev/null and b/docs/images/diagrams.fig differ diff --git a/docs/images/esm.png b/docs/images/esm.png deleted file mode 100644 index 2998a6d0688dee..00000000000000 Binary files a/docs/images/esm.png and /dev/null differ diff --git a/docs/images/esm.svg b/docs/images/esm.svg new file mode 100644 index 00000000000000..ac772db0bb80a4 --- /dev/null +++ b/docs/images/esm.svg @@ -0,0 +1,51 @@ + +Native ESM based dev server + +entry + + +··· + + +route + +route + + + + + + + + + + + +module + +module + +module + +module + +··· + +Server ready + + +Dynamic import (code split point) +HTTP request + + + + + + + + + + + + + diff --git a/docs/images/graph.png b/docs/images/graph.png deleted file mode 100644 index 8b45aa9b673a6e..00000000000000 Binary files a/docs/images/graph.png and /dev/null differ diff --git a/docs/images/graph.svg b/docs/images/graph.svg new file mode 100644 index 00000000000000..df02c439121b29 --- /dev/null +++ b/docs/images/graph.svg @@ -0,0 +1,16 @@ + + +Entry + +async chunk A + +common chunk C + +async chunk B + + +dynamic import +direct import + + +