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

·  阅读 2574

对于大型项目,动态路由组件动辄几十上百个。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'即可。

download-vite

open-vite

实测

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

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

download-vite

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改