前言

这是我参与「第四届青训营」笔记创作活动的第9天

下面一起学习vite，冲冲冲😎😎😎

浅谈构建工具

前端工程痛点：

模块化：把项目按不同模块划分开发，前端js没有统一的模块化规范，前端诞生了很多的规范，但主要的规范为ESM，CommonJS，UMD，尽管现在有了一些常用的规范，但还未形成统一，所以模块化在前端工程化中仍然是个问题
资源编译：TS,JSX,Sass等高级语法基本上成为了项目的标配，但是这些语法浏览器是不认识的，我们需要把她们编译为浏览器认识的，所以这些编译就需要一系列的工具链来完成
产物质量：考虑线上代码压缩；对于未使用到的模块，需要将构建产物当中剔除掉，来优化产物体积；对于低版本浏览器或旧设兼容，代码语法很值得注意，比如写了高级语法，但放到低端浏览器中会出现白屏等影响地产生
开发效率：修改代码后想要立刻看到最新地效果，但是如果没有这方面的工具解决这方面的问题，那么开发体验和效率都是不整么友好

前端构建工具的意义

vite概要介绍

什么是vite

定位：新一代前端构建工具

vite组成：

No-bundle开发服务，源文件无需打包
生产环境基于Rollup的Bundler

核心特征：

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

看看案例来感受vite的高性能优势：

当前构建工具的问题

传统的构建工具：

缓慢的启动（打包时间慢） ——> 项目编译等待成本高
缓慢的热更新（单线程JS） ——> 修改代码后不能实时更新

vite上手使用

项目初始化

# 提前安装 pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev

生产环境 Tree Shaking

Tree Shaking作用：把为用到的代码删除掉

默认开启Tree shaking

vite整体架构

1. 关键技术：依赖预打包

为什么要预打包？
- 避免node_modules过多少的文件请求
- 将CommonJS格式转化为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码经行预打包
- 改写import语句，指定依赖为构建产物路径

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

2. 关键技术：单文件编译

用Esbuild编译TS/JSX

优势：编译数度提高10-100倍

局限性：不支持类型检查，不支持语法降级到ES5

解释：Esbuild编译熟读非常快，这个性能优势是非常明显的，但是于此同时，Esbuild不支持类型检查，这也是为什么vite在生产环境构建的时候要调用TSC，这是Esbuild的第一个短板，第二个短板就是兼容性的问题，语法只能降到ES6，对于低版本浏览器来说就不行了，直接会报错。如：箭头函数（ES6的）经过Esbuild编译还是ES6的箭头函数，放到一些低版本浏览器是会报错的。

3. 关键技术：代码压缩

在vite中Esbuild被作为默认的压缩工具，替换传统的Terser，Uglify.js等压缩工具

4. 关键技术：插件机制

vite有个叫Plugin Container（Mock Rollup），在开发阶段用来模拟Rollup插件机制，而生产环境直接用Rollup。

总结

掌握好构建工具，让开发更加丝滑

vite知识 | 青训营笔记

前言