Vite概要介绍

Vite是什么？ Why Vite？

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

两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快。
- 简单易用，开发者体验好

当下问题（开发体验问题日渐显露）

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

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

瓶颈在哪里？

bundle带来的性能开销
JavaScript语言的性能瓶颈

行业趋势

基于原生ESM的开发服务优势

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

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

当前浏览器绝大部分都能运行以下代码(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>

基于Esbuild的编译性能优化

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

Esbuild——基于Golang开发的前端工具，具备如下能力：

打包器Bundler
编译器Transformer
压缩器Minifier
性能极高，在Vite中被深度使用

整体架构

Vite架构图

预打包

原因：

避免过多的node_modules
将commonjs 转换成ESM

原理：

服务启动前扫描依赖包
用esbuild预打包
将import 路径改为预构建产物的路径

//改写前
import React from "react";
//改写后
import React from '/node_modules/.vite/react.js'

单文件编译

优势：

使用Esbuild编译TS/JSX,速度非常快提升至10-100X

局限性：

不支持类型检查，因此在生产环境构建时要调用一次tsc。（在生产构建项目时要先通过类型编译检查才行,如下图）
不支持语法降级到ES5，只能降到ES6。比如说箭头函数在低版本浏览器是会报错的。

插件机制

使用插件的原因：

解耦：将两大功能构建和 dev server 分开
易于扩展

过程：

开发阶段：用插件模拟rollup
生产阶段：直接使用rollup

重要插件

vite进阶学习

深入学习构建工具

编译原理：解析为抽象语法树，转化后，再生成代码

服务端渲染（SSR）

是一种将动态生成的页面在服务器端进行渲染并将最终渲染结果发送到客户端的技术。相比于传统的客户端渲染（CSR，Client-Side Rendering），SSR 提供了一些优势和用途。