浅谈Vite：一个 3.0专属的开发工具

内容目录

• Vite
• • 使用前的知识回顾
  • • 浏览器原生方式使用ES Module
    • `vite` VS `vue-cli`
    • • vite的特点
• Vite 如何使用
• • Vite 创建项目
  • • Vite的使用
  • 更多详细内容请参考 [【vitejs官网】](/guide/)
  • • • 也可以[在线试用Vite](/edit/vitejs-vite-zkyegg?file=,&terminal=dev)

Vite

这个单词源自一个法语单词，有更快的意思。
也就是说它比过去基于Webpack的cli工具更快。

使用前的知识回顾

浏览器原生方式使用ES Module

• 现代浏览器都支持ES Module(IE除外)，即使用import/export导入导出模块。
• 通过下面的方式加载模块：<script type="module" src=""></script>。
• 支持模块的script默认延迟加载
  • 类似于script标签设置defer；
  • 在文档解析完成后，触发 DOMContentLoaded 事件 前 执行。

vite VS vue-cli

vite 的快就是利用了浏览器支持的ES Module的方式，避免开发环境下打包，从而提升开发速度。Vue会开启一个测试服务器，拦截留篮球发送的请求，浏览器会想服务器发送请求获取相应的模块。Vite会对浏览器不识别的模块进行处理，比如import单文件组件的时候，也就是后缀名为.vue的文件时，会在服务器上对.vue文件进行编译，把编译的结果返回给浏览器。

---

• Vite 在开发模式下不需要打包，可以直接运行；
• Vue-CLI 开发模式下必须对项目打包才可以运行。

---

• Vite 在生产环境下使用 Rollup打包
  • 基于ES Module的方式打包，不需要使用babel把import转换成require。
• Vue-CLI使用Webpack打包

vite的特点

• 快速冷启动
• 按需编译，只要当前需要被加载时才会编译，不需要在开启开发服务器的时候 等待整个项目被打包，项目较大的时候，情况会更明显。
• 模块热更新，模块热更新的性能与模块总数无关，HMR的速度始终比较快。

Vite 如何使用

Vite 创建项目

兼容性注意

• Vite 需要 版本 >= 12.0.0。

Vite的使用

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

更多详细内容请参考 【vitejs官网】

也可以在线试用Vite