# Vite的概念

伴随着Vue3的推出,作者还开发了一个构建工具Vite,来源法语快的意思。它是一个面向现代浏览器的一个更轻、更快的Web应用开发工具,它基于ECMAScript标准原生模块系统(ES Modules)的实现,避免开发环境下打包,从而提升开发速度。

浏览器加载ES Module

  • 除了IE现代浏览器都支持ES Module
  • 通过下面的方式加载模块
<script type="module" src="..."></script>
  • 标记为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创建项目的两种方式

  1. 创建Vue3的项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
  1. 基于模板创建项目

基于模板的方式可以让他支持其他的框架,在创建项目的时候后面跟上要使用的框架。

npm init vite-app --template react
npm init vite-app --template preact

# 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打包的两个原因:

  1. 浏览器环境并不支持模块化
  2. 零散的模块文件会产生大量的HTTP请求

第一个问题,现在绝大多数浏览器都支持模块化,除了IE。
第二个问题,HTTP2可以帮我们解决,它可以复用链接。

# 5. Vite支持

几乎不需要额外的配置

  • 默认支持TypeScript
  • 默认支持less/sass/stylus/postcss预编译器(需要单独安装编译器)
  • JSX
  • Web Assembly
更新时间: 2021-02-25 00:05