讲真的，通过这个例子，我知道 vite 为什么比 webpack 快了

对于大型项目，动态路由组件动辄几十上百个。webpack 是在编译阶段将所有组件都打包写入到内存，但 vite 仅仅只是在运行时动态请求所需的一个路由组件而已，速度确实是质的提升！

vite 利用现代浏览器天然支持 import 模块化的特性，在运行时动态请求依赖的文件。也就是说如果 hash 是 '#a'，则请求'a.js'，不请求'b.js'。 如果 hash 是 '#b'，则请求'b.js'，不请求'a.js'。

废话不多说，直接上代码

1. index.html

<!-- 此处一定要加上 type="module" -->
<script src="./main.js" type="module"></script>

2. main.js

// 假设当前路由为'a'
let hash = window.location.hash || '#a'

if (hash === '#a') {
  // 如果路由为'a'，则在运行时动态请求 'a.js' 文件
  import('./a').then(a => {
    a.default()
  })
} else if (hash === '#b') {
  // 如果路由为'b'，则在运行时动态请求 'b.js' 文件
  import('./b').then(b => {
    b.default()
  })
}

3. a.js

export default function a() {
  document.write('a......')
}

4. b.js

export default function b() {
  document.write('b......')
}

为方便大家测试，我写了 vscode 插件，在 vscode 插件市场搜索 vite, 注意下载作者是 Rui Ge 的，点右键直接执行 'Open with Vite Server'即可。

实测

1. 如果 hash 是 '#a', 则请求'a.js'，不请求'b.js'

   

2. 如果 hash 是 '#b', 则请求'b.js'，不请求'a.js'

   

最后，欢迎大家下载 vscode 插件 vite，立马就可享受 vite 的急速体验哦~