Vite
什么是 Vite
Vite是新一代的前端构建工具
对比于webpack 他更轻更快 能够显著的提升前端的开发体验
它由两部分组成
一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。
简单的说
- 开发环境中,无需打包操作,可快速的冷启动。
- 轻量快速的热重载(HMR)。
- 真正的按需编译,不再等待整个应用编译完成。
简单的对比一下webpack 二者的工作模式
这就是冷打包
话不多说 我们开始实用
创建
根据Vite官网介绍,我们可以使用npm或yarn来初始化Vite项目,并且Node.js的版本需要 >= 12.0.0。
初始化
npm init vite@latest 项目名
yarn create vite 项目名
这边我们使用的是yarn创建一个Vite+Vue的项目
yarn create vite my-vue-app --template vue
创建成功并打开测试一下
我们对比webpack创建的项目看看
打开项目后 我们先初始化
对比于webpack
vite不会给我们初始化
我们需要手动的进行初始化
命令 yarn
接着我们运行代码
命令 yarn dev