Vite知识体系 | 青训营Vite概要介绍 Vite的定位为定位:新一代前端构建工具. 两大组成部分: 1.No-bu

Vite概要介绍

Vite的定位为定位:新一代前端构建工具.

两大组成部分:

1.No-bundle开发服务，源文件无需打包;

2.生产环境基于Rollup 的 Bundler. 核心特征:

高性能,dev启动速度和热更新速度非常快;
简单易用，开发者体验好.

	Dev启动时长	Dev页面加载	Build时长
Vue-cli	2568ms	320ms	5.23
Vite	232ms	379ms	2.13

由测试结果可见Vue-cli和Vite的dev命令运行耗时相差十倍,而且随着项目体积越大性能的差距也越大,为啥呢?

当下问题

当前构建工具的通病是什么呢?我认为有以下两点:

缓慢的启动,这意味着项目编译等待成本高
缓慢的热更新,以至于修改代码后不能快速同步更新

对于产生上述两点问题的原因就是bundle带来的大量性能开销以及JavaScript语言的性能瓶颈.

行业趋势

全球浏览器对原生ESM普遍支持

1.当前浏览器绝大部分都能运行以下代码(script标签增加type=’module’属性;支持ESM模块导入导出语法):

// fn.js
export const fn = 'fn'

// index.html
<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>

    <script type="module" >
        import {fn} from './fn.js'
        console.log(fn) // fn
    </script>
  </body>
</html>

2.基于原生ESM的开发优势:

无需打包项目源代码
按需加载
可以利用文件级别的浏览器缓存

基于原生语言(如golang,Rust)编写的前端工具链逐渐兴起(如golang编写的Esbuild,Rust编写的SWC等)

从上图可以看出EsBuild的性能是其他工具的百倍左右,打包编译压缩等方面比传统的工具性能强,在Vite中被深度使用,并且Vite上手简单,开箱即用,并不要设置很多配置项

Vite上手实战

那么下面就开始介绍Vite的使用:

Vite项目初始化

# 使用 NPM:
npm create vite@latest

# 使用 Yarn:
yarn create vite

# 使用 PNPM:
pnpm create vite

npm create vite

npm install

npm run dev

选择好配置项就成功了!

Vite优势

热更新HMR:Vite自带
使用静态资源:vite内置了对于JSON,Worker,WASM资源的加载支持
生产环境Tree Shaking(默认开启)
1. 基于ESM的import/export语句依赖关系,与运行时状态无关(CommonJS的require可能依赖运行时计算的结果,所以不支持Tree Shaking)
2. 在构建阶段将未使用到的代码进行删除