Vite的概念
2/25/2021 ViteVue
伴随着Vue3的推出，作者还开发了一个构建工具Vite，来源法语快的意思。它是一个面向现代浏览器的一个更轻、更快的Web应用开发工具，它基于ECMAScript标准原生模块系统(ES Modules)的实现，避免开发环境下打包，从而提升开发速度。
浏览器加载ES Module
- 除了IE现代浏览器都支持ES Module
- 通过下面的方式加载模块
<script type="module" src="..."></script>
1
- 标记为module的script模块默认是延迟加载的，类似于设置defer属性，这个实在文档解析完成(生成DOM树)后，并且在触发DOMContentLoaded事件前执行。
# Vite as Vue-CLI
# 开发模式
- Vite在开发模式下不需要打包可以使用script+module的方式运行。 vue会开启一个测试的服务器，会拦截浏览器发送的请求，浏览器会向服务器发送相应的请求获取相应的模块。vite会对浏览器不识别的模块进行处理，比如引入单文件组件的时候，即后缀名为.vue的文件时，会在服务器上对.vue的文件进行编译，并将编译的结果返回给浏览器。
- Vue-CLI开发模式下必须对项目进行打包才可以运行。
# 生产环境
- Vite在生产环境下使用Rollup打包 ，Rollup基于浏览器原生的ESModule进行打包，不需要使用babel再把import转化成require，以及相应的辅助函数，因此打包的体积会比webpack打包的体积更小。
- Vue-CLI使用webpack打包
# Vite特点
优势主要是提升开发者在开发过程中的体验：
- 快速冷启动(不需要打包)
- 按需编译(不需要开启项目的时候等待整个代码被打包)
- 模块热更新(性能与模块总数无关)
- 开箱即用 (避免各种loader和plugin的配置)
# Vite创建项目的两种方式
- 创建Vue3的项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
1
2
3
4
2
3
4
- 基于模板创建项目
基于模板的方式可以让他支持其他的框架，在创建项目的时候后面跟上要使用的框架。
npm init vite-app --template react
npm init vite-app --template preact
1
2
2
# Vite 基本使用
- vite serve
- vite build
注意
Vite1.0 只支持Vue3.0的版本 Vite2.0 适配了Vue2.x和其他架构，在创建项目的时候通过指定使用不同的模板也支持其他框架。
# Vite为什么会出现?
# 1. 开发编译
用于解决在开发阶段webpack-dev-server冷启动时间过长的问题。
# Vite serve VS vue-cli-service serve
| Vite serve | vue-cli-service serve |
|---|---|
| 不需要打包，直接开启一个serve服务器，所以比较快。当浏览器请求单文件组件，即时编译这个组件返回浏览器。 | 内部使用webpack首先打包所有的模块，如果模块多打包速度会非常的慢，把打包的结果存储到内存中，然后才会开启开发的web服务器，浏览器请求web服务器把内存中打包的结果直接返回给浏览器。 |
# 2. HMR
用于解决webpack的HMR热更新速度慢的问题。
# Vite HMR VS Webpack HMR
| Vite HMR | Webpack HMR |
|---|---|
| 立即编译当前所修改的文件，相应速度很快。 | 会自动以这个文件为入口重新build一次，所有涉及的依赖都会被加载一次，所以速度慢。 |
# 3. 依赖少
使用Vite创建的项目就是一个普通的Vue3.0的应用，相比于vue-cli创建的项目，少了很多配置文件和依赖。Vite创建的项目开发依赖很简单，只有：
- Vite(命令行工具)
- @vue/compiler-sfc(编译项目中.vue结尾的单文件组件，vue2中使用的是vue-template-compiler)
# 4. Vite build
使用Rollup进行打包，对于代码切割的需求，Vite采用动态导入特性实现，有相关Polyfill。
究竟有没有必要去打包应用?
之前使用webpack打包的两个原因：
- 浏览器环境并不支持模块化
- 零散的模块文件会产生大量的HTTP请求
第一个问题，现在绝大多数浏览器都支持模块化，除了IE。
第二个问题，HTTP2可以帮我们解决，它可以复用链接。
# 5. Vite支持
几乎不需要额外的配置
- 默认支持TypeScript
- 默认支持less/sass/stylus/postcss预编译器(需要单独安装编译器)
- JSX
- Web Assembly