前端与 HTML | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天。

一、本堂课重点内容：

• 构建工具的意义
• Vite 概览介绍
• Vite 上手实战
• Vite 整体架构

二、详细知识点介绍：

• Vite概览

  • 两大组成部分

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

    2.生产环境基于 Rollup 的 Bundler

  • 核心特征

    1.高性能，dev启动速度和热更新速度非常快 !

    2.简单易用，开发者体验好

  

• ESBuild

  ESBuild性能极高，在Vite中被深度使用

  它是基于Golang开发的前端工具，具备如下能力

  1. 打包器 Bundler---对标webpack能力
  2. 编译器 Transformer---对标Babel的能力
  3. 压缩器 Minifier--对标其他js压缩工具

• 生产环境Tree Shaking

  Tree Shaking 在 Vite 中无需配置，默认开启 !

  优化原理：

  1. 基于ESM的import/export 语句依赖关系，与运行时状态无关。（import/export都是静态资源，可以进行Tree Shaking操作。而CommonJS 格式不能做到 Tree Shaking，因为require 的部分可能依赖运行时计算的结果）
  2. 在构建阶段将未使用到的代码进行删除

• 依赖预打包

  开发模式下，在devServer启动前，Vite会先扫描一下所有依赖，用Esbuild进行预打包。

• 单文件编译

  用 Esbuild 编译 TS/JSX

  优势：编译速度提升10-100x

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

• 代码压缩

  Esbuild 作为默认压缩工具，替换传统的 Terser、Uglifyjs 等压缩工具

• 插件机制

  vite的插件既可以用到生产环境下，也可以用到开发模式下

  在开发模式下，vite使用Plugin Container来模拟Rollup插件机制

  在生产模式下，vite直接使用Rollup

三、实践练习例子：

尝试了一些常用配置

四、课后个人总结：

对于前端资源构建工具来说，感觉Vite相对于webpack是更加轻便的，用起来会更加省力，不用人工去写大量的配置项，并且打包的速度也会更快。

五、引用参考：

• 安装pnpm：npm i -g pnpm
• 插件兼容性：vite-rollup-plugins.patak.dev/